jQuery: Autocomplete Issue with Select

I found an interesting undocumented consequence when you override the _renderItem function with one of your own. Most people might attempt to follow the format from the code example which shows a line that appends an “<a>” tag to the string (specifically as follows):

.append( $( "<a>" ).text( item.label ) )

I did something a little different where I wrote out my html. But my code started like this:

.append('<a href="#" class="food-row-link>">

What I discovered was that upon clicking the link, I would be redirected to the base url of the site I’m developing. Although I attempted to override the select event function, I still had issues preventing the reload. What I discovered was that by putting the href=”#” attribute, autocomplete would use the value in the href, even after processing the select event. I attempted to correct this behavior through further overriding the event on the link by coding something like:

$('a.food-row-link').click(function(){
  return false;
});

However, that did nothing because the autocomplete function was overriding mine. In the end, you just have to make sure that unless you want the page to redirect, never to put the href attribute on a link in the line item for autocomplete. Removing it allowed the event to not be redirected and behave as expected with the select event that I defined.

Comments

comments