Jquery ui combobox (autocomplete) disappears

Question

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();
  });

and the 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;
 }

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!

Billet

Answer 1

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

Fu

+1 this was a hard one to figure out. I had links to both old and new versions of jQuery UI. – Whew

hahaha thanks mine was even harder. One was called normally in the header, the second one was called dynamically through Javascript :s. – Fu

I had copy pasted that code accidentally so that this problem occurred. It was hard to identify the problem. @bicycle's suggestion worked for me – Bekki

Answer 2

This will happen in a related scenario where you reference the primary jQuery UI (jquery-ui.js) library and the individual libraries for jquery ui autocomplete at the same time. The jQuery-ui file contains all the children so there is no need to reference both.

Kinswoman

This solved my problem. I was look for the duplicate js files like everyone suggests. As it turns out, jquery-ui.js contains all individual files. – Parks

Thanks, friend. That fixed it for me. – Radiochemical