CODEWITHSUNDEEP
javascriptjquerydrop-down-menuautocompletejquery-ui-autocomplete
Dickson Xavier
Dickson Xavier

Reputation: 109

Jquery autocomplete not showing 2 or multiple spaces in drop down suggested

In JQuery autocomplete , similar items with difference of multiple spaces in between words are shown as duplicates item in drop-down as Jquery plugin itself is trimming the drop-down items.

Demo:Working demo of issue 

var validOptions =["Item 1", "Item        1", "Item     1", "Item 2", "Item   2"];
previousValue = "";

$('#ac').autocomplete({
    autoFocus: true,
    source: validOptions,
}).keyup(function() {
    var isValid = false;
    for (i in validOptions) {
        if (validOptions[i].toLowerCase().match(this.value.toLowerCase())) {
            isValid = true;
        }
    }
    if (!isValid) {
        this.value = previousValue
    } else {
        previousValue = this.value;
    }
});

Is there any way to show the value as such in drop-down items. Demo[2]

Upvotes: 2

Views: 710

Answers (1)

Ankur Garg
Ankur Garg

Reputation: 605

you need to apply the tiny css for li element white-space: pre-wrap during HTML rendering .

Here is the complete snippet 

var validOptions = ["Item 1", "Item        1", "Item     1", "Item 2", "Item   2"];
previousValue = "";

$('#ac').autocomplete({
 autoFocus: true,
 source: validOptions
})
.keyup(function() {
var isValid = false;
for (i in validOptions) {
  if (validOptions[i].toLowerCase().match(this.value.toLowerCase())) {
    isValid = true;
  }
}
if (!isValid) {
  this.value = previousValue
} else {
  previousValue = this.value;
}
}).autocomplete("instance")._renderItem = function(ul, item) {
   return $("<li style='white-space: pre-wrap'>")
  .append(item.label)
  .appendTo(ul);
};

Working fiddle : http://jsfiddle.net/ankurgarg36/kwLmLumd/23/

This .autocomplete("instance")._renderItem function is not working with the your js version. So I need to use latest version suggested here

Upvotes: 2

Related Questions