Unhighlight first highlighted item from AutoComplete

Question

Here I am using p:autoComplete tag in PrimeFaces 5.1, but I can't remove first highlighted/selected item from the suggestions list. How I can remove this ?

Answer 1

Since your "problem" comes from this particular line,

firstItem.addClass('ui-state-highlight');

What happens here is when the suggestions are ready to show up the script highlights the first item of the list, so in your case you would just "unhighlight" that item.

I have created a small function that would do that on every AutoComplete you have, you can call it in your document.ready or where ever you see suitable:

function removeHighlightedFirstItem() {
  var oldAutoCompleteShowSuggestions = PrimeFaces.widget.AutoComplete.prototype.showSuggestions;

  PrimeFaces.widget.AutoComplete.prototype.showSuggestions = function(query) {     
     //calling original ShowSuggestions 
     oldAutoCompleteShowSuggestions.apply(this, [query]);
     //after ShowSuggestions
     //remove first item highlight 
     var firstItem = this.items.eq(0);
     firstItem.removeClass('ui-state-highlight');
  }
}

The result would look like this:

Note: The feature you are requesting is available for 5.1.5, 5.0.14 and 5.2 by adding the autoHighlight = "false" attribute to the component.