CODEWITHSUNDEEP
jquery-ui
Surinder
Surinder

Reputation: 63

Jquery autocomplete not showing selected item in search box when scrolling through the list

When scrolling through the list of options, the values being highlighted are not being displayed in the search box. I am using the jquery-ui version 1.10.3. It is working correctly when i select them through keyboard.

Code:

_createAutocomplete: function () {
                var selected = this.element.children(":selected"),
             selectedvalue = selected.text()
                             ? selected.text() : "";

                this.input = $("<input>")
                          .appendTo(this.wrapper)
                          .val(selectedvalue)
                          .attr("title", "")
                          .addClass("custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left")
                          .autocomplete({
                              minLength: 4,
                              source: $.proxy(this, "_source")
                          })
                          .tooltip({
                              tooltipClass: "ui-state-highlight"
                          });

                this._on(this.input, {
                    autocompleteselect: function (event, orgselect) {
                        var newvar = this.input.val();
                        $("#control option").filter(function () {
                            return this.value == newvar;
                        }).attr('selected', true);
                        this.input.val($("#control option:selected").text());
                    },
                    autocompletechange: "_removeIfInvalid"
                });

Upvotes: 0

Views: 640

Answers (1)

Joke_Sense10
Joke_Sense10

Reputation: 5412

Use jquery-ui focus function to highlight the value in the input box :

$( "#demo" ).autocomplete({
  source: texts,
  focus: function( event, ui ) {
    $( "#demo" ).val( ui.item.label );
    return false;
  }
  });

Upvotes: 1

Related Questions