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

时间:2016-11-26 14:21:13

标签: jquery autocomplete hover mouseover jquery-ui-autocomplete

我正在使用找到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会更新原始选项列表。

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

3 个答案:

答案 0 :(得分:0)

尝试使用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

      });
  });
});

小提琴:http://jsfiddle.net/4BTyH/308/

答案 1 :(得分:0)

解决!

从我的初始帖子

中查看上面的代码

查找:

  _hoverOption: function() {},

替换为:

  _hoverOption: function() {

      var input = this.input;

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

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

               //tooltip logic

              });

        });

      },

答案 2 :(得分:0)

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

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

在此示例中,var prdtFIltered是json。