jQuery UI组合框(自动完成)消失 [英] Jquery ui combobox (autocomplete) disappears

问题描述

我正在尝试执行此操作 http://jqueryui.com/autocomplete/#combobox 问题是，当我将鼠标移到选项上时，选项将消失，并且出现以下建议:"x与任何项目都不匹配"，其中x是我在组合框中写的字母. 现在，我发布该网站上的脚本:

I'm trying to do this http://jqueryui.com/autocomplete/#combobox The problem is that when I go with the mouse over an option, options will disappears and it cames out the advice: "x didn't match any item" where x are the letters that I wrote in the combobox. Now I post the script that is on the site:

  (function( $ ) {
$.widget( "ui.combobox", {
  _create: function() {
    var input,
      that = this,
      wasOpen = false,
      select = this.element.hide(),
      selected = select.children( ":selected" ),
      value = selected.val() ? selected.text() : "",
      wrapper = this.wrapper = $( "<span>" )
        .addClass( "ui-combobox" )
        .insertAfter( select );

    function removeIfInvalid( element ) {
      var value = $( element ).val(),
        matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( value ) + "$", "i" ),
        valid = false;
      select.children( "option" ).each(function() {
        if ( $( this ).text().match( matcher ) ) {
          this.selected = valid = true;
          return false;
        }
      });

      if ( !valid ) {
        // remove invalid value, as it didn't match anything
        $( element )
          .val( "" )
          .attr( "title", value + " didn't match any item" )
          .tooltip( "open" );
        select.val( "" );
        setTimeout(function() {
          input.tooltip( "close" ).attr( "title", "" );
        }, 2500 );
        input.data( "ui-autocomplete" ).term = "";
      }
    }

    input = $( "<input>" )
      .appendTo( wrapper )
      .val( value )
      .attr( "title", "" )
      .addClass( "ui-state-default ui-combobox-input" )
      .autocomplete({
        delay: 0,
        minLength: 0,
        source: function( request, response ) {
          var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
          response( select.children( "option" ).map(function() {
            var text = $( this ).text();
            if ( this.value && ( !request.term || matcher.test(text) ) )
              return {
                label: text.replace(
                  new RegExp(
                    "(?![^&;]+;)(?!<[^<>]*)(" +
                    $.ui.autocomplete.escapeRegex(request.term) +
                    ")(?![^<>]*>)(?![^&;]+;)", "gi"
                  ), "<strong>$1</strong>" ),
                value: text,
                option: this
              };
          }) );
        },
        select: function( event, ui ) {
          ui.item.option.selected = true;
          that._trigger( "selected", event, {
            item: ui.item.option
          });
        },
        change: function( event, ui ) {
          if ( !ui.item ) {
            removeIfInvalid( this );
          }
        }
      })
      .addClass( "ui-widget ui-widget-content ui-corner-left" );

    input.data( "ui-autocomplete" )._renderItem = function( ul, item ) {
      return $( "<li>" )
        .append( "<a>" + item.label + "</a>" )
        .appendTo( ul );
    };

    $( "<a>" )
      .attr( "tabIndex", -1 )
      .attr( "title", "Show All Items" )
      .tooltip()
      .appendTo( wrapper )
      .button({
        icons: {
          primary: "ui-icon-triangle-1-s"
        },
        text: false
      })
      .removeClass( "ui-corner-all" )
      .addClass( "ui-corner-right ui-combobox-toggle" )
      .mousedown(function() {
        wasOpen = input.autocomplete( "widget" ).is( ":visible" );
      })
      .click(function() {
        input.focus();

        // close if already visible
        if ( wasOpen ) {
          return;
        }

        // pass empty string as value to search for, displaying all results
        input.autocomplete( "search", "" );
      });

    input.tooltip({
      tooltipClass: "ui-state-highlight"
    });
  },

  _destroy: function() {
    this.wrapper.remove();
    this.element.show();
  }
});
  })( jQuery );

  $(function() {
  $( "#combobox" ).combobox();
  });

和CSS:

 .ui-combobox {
position: relative;
display: inline-block;
}
 .ui-combobox-toggle {
  position: absolute;
  top: 0;
  bottom: 0;
  margin-left: -1px;
  padding: 0;
  /* support: IE7 */
  *height: 1.7em;
  *top: 0.1em;
 }
 .ui-combobox-input {
  margin: 0;
  padding: 0.3em;
 }

和我的选择(使用JSP构建)

and my select (builded with JSP)

 <select id="combobox"><option value="">Select one...</option>
                                    <%for(int i=0;i<ut.size();i++){
                                    out.print("<option value=\""+ut.get(i).getIdUtente()+
                                            "\">"+ut.get(i).getNome()+" "+ut.get(i).getCognome()+" ("+ut.get(i).getIdUtente()+")"+"</option>");

                                    }
                                        %>

                                    </select>

现在，我的问题在哪里? 预先感谢！

Now, where is my problem? thanks in advance!

推荐答案

这也发生在我身上.看来jQuery UI js文件被调用了两次.删除一个就可以了

It happened to me also. It appeared to be that the jQuery UI js file was called twice. Remove one and it will work

这篇关于jQuery UI组合框(自动完成)消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！