jQuery ComboBox - 列表中选项的事件（鼠标输入/悬停）

Question

我正在使用找到的代码示例 here 并想添加一个函数，当用户将鼠标悬停在组合框中的选项上时，该函数将创建一个带有消息的工具提示。每个选项的工具提示必须出现在悬停时。

在这个阶段，我只想触发事件，其中的消息本身可以是我稍后定义的任何内容。有人可以帮忙吗？

这是我的代码：

      $( function() {
        $.widget( "custom.combobox", {
          _create: function() {
            this.wrapper = $( "<span>" )
              .addClass( "custom-combobox" )
              .insertAfter( this.element );
     
            this.element.hide();
            this._createAutocomplete();
            this._createShowAllButton();
            this._hoverOption();
          },
       
       
    /*
    *
    * Hover Event
    *
    */
          _hoverOption: function() {},
       
    
          _createAutocomplete: function() {
            var selected = this.element.children( ":selected" ),
              value = selected.val() ? selected.text() : "";
     
            this.input = $( "<input>" )
              .appendTo( this.wrapper )
              .val( value )
              .attr( "title", "" )
              .addClass( "custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left" )
              .autocomplete({
                delay: 0,
                minLength: 0,
                source: $.proxy( this, "_source" )
              })
              .tooltip({
                classes: {
                  "ui-tooltip": "ui-state-highlight"
                }
              });
     
            this._on( this.input, {
              autocompleteselect: function( event, ui ) {
                ui.item.option.selected = true;
                this._trigger( "select", event, {
                  item: ui.item.option
                });
              },
     
              autocompletechange: "_removeIfInvalid"
            });
          },
     
          _createShowAllButton: function() {
            var input = this.input,
              wasOpen = false;
     
            $( "<a>" )
              .attr( "tabIndex", -1 )
              .attr( "title", "Show All Items" )
              .tooltip()
              .appendTo( this.wrapper )
              .button({
                icons: {
                  primary: "ui-icon-triangle-1-s"
                },
                text: false
              })
              .removeClass( "ui-corner-all" )
              .addClass( "custom-combobox-toggle ui-corner-right" )
              .on( "mousedown", function() {
                wasOpen = input.autocomplete( "widget" ).is( ":visible" );
              })
              .on( "click", function() {
                input.trigger( "focus" );
     
                // Close if already visible
                if ( wasOpen ) {
                  return;
                }
     
                // Pass empty string as value to search for, displaying all results
                input.autocomplete( "search", "" );
              });
          },
     
          _source: function( request, response ) {
            var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
      var result = [];
            result = this.element.children( "option" ).map(function() {
              var text = $( this ).text();
              if ( this.value && ( !request.term || matcher.test(text) ) )
                return {
                  label: text,
                  value: text,
                  option: this
                };
            }); 
      if(result.length == 1 && request.term.length > this.options.previousValue.length ){
        result[0].option.selected = true;
        this._trigger( "select", null, {
         item: result[0].option
        });
        this.input.val(result[0].label);
        this.options.previousValue = result[0].label;
      }else{
       this.options.previousValue = request.term;  
      }
      response(result);
      
          },
     
          _removeIfInvalid: function( event, ui ) {
     
            // Selected an item, nothing to do
            if ( ui.item ) {
              return;
            }
     
            // Search for a match (case-insensitive)
            var value = this.input.val(),
              valueLowerCase = value.toLowerCase(),
              valid = false;
            this.element.children( "option" ).each(function() {
              if ( $( this ).text().toLowerCase() === valueLowerCase ) {
                this.selected = valid = true;
                return false;
              }
            });
     
            // Found a match, nothing to do
            if ( valid ) {
              return;
            }
     
          },
     
          _destroy: function() {
            this.wrapper.remove();
            this.element.show();
          }
        });
     
        $( "#combobox" ).combobox();
    
      } );

li.ui-menu-item {
 padding-left: 15px; 
}

.custom-combobox {
 position: relative;
 display: inline-block;
 margin-right: 40px;
  }
  
.custom-combobox-toggle {
    position: absolute;
    top: 0;
    bottom: 0;
    margin-left: -1px;
    padding: 0;
  }

.custom-combobox-input {
    margin: 0;
    padding: 5px 10px;
  }

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>



  <select id="combobox">
    <option value="">Select one...</option>
    <option value="good">one</option>
    <option value="bad">two</option>
    <option value="ugly">three</option>

  </select>

在解决这个问题时，请务必记住 jQuery 过程隐藏了原始列表。它创建一个具有 ul li 结构的新列表。

因此，为选项列表创建事件将不适用于悬停，因为用户无法与原始列表交互，因为 jQuery 代表用户执行此操作。

当用户选择一个选项时，jQuery 更新原始选项列表。

因此，为了使 mouseover/hover/mouseenter 事件在这里起作用，它必须绑定到 jQuery 创建的列表。

Answer 1

尝试 mouseover() jQuery 方法。

https://api.jquery.com/mouseover/

 $(document).ready(function(){
  //For each option in the combobox select
  $('select#combobox option').each(function(){
      // attach an mouseover event
      $(this).on('mouseover', function(){
           //your tooltip logic

      });
  });
});

Fiddle 给你：http://jsfiddle.net/4BTyH/308/

Answer 2

已解决！

请参阅上面我最初的代码 post

查找：

  _hoverOption: function() {},

替换为：

  _hoverOption: function() {

      var input = this.input;

      input.autocomplete( "widget" ).each(function() {

          $(this).on('mouseenter', "li", function(){

               //tooltip logic

              });

        });

      },

Answer 3

可以在数据填充组合框的同时为每个项目填充工具提示：

$.each(prdtFiltered, function() {
                        producto.append($("<option />").val(this.cod_producto).text(this.producto_nombre).attr("title",this.descripcion));
                    });

在此示例中，var prdtFIltered 是 json。

jQuery ComboBox - 列表中选项的事件（鼠标输入/悬停）

jQuery ComboBox - Event (mouse enter / hover) for options in list

jquery

autocomplete

mouseover

hover

jquery-ui-autocomplete