How to get autocomplete like stack overflow

Question

I am trying to implement autocomplete such as stack overflow for tag completion. however I tried to view the source and minified

I am trying to get features such as letting the user add a tag if it exists in the list, then fine, or add it to the database.

Are there any examples showing how to do something like this? or can I somehow view the non-minified version of the source?

Answer 1

I don’t know exactly how to do this, but ....

if you look at this answer: jQueryUI: how can I configure the parameters of the Autocomplete plug-in?

you can see how you can script using jQuery render logic to change how the menu items are displayed. There is also an internal jQuery function called renderMenu that actually represents the options.

I have not tried this, but I believe that by opening this black box and replacing or renaming renderMenu and its related functions, you can do what you want - to display only one element in the actual text box.

That's where I start, anyway.

---

EDIT

I again looked at the autocomplete stuff in the jQuery user interface. It seems like a pretty simple replacement for the menu display logic by inserting a custom response() function.

Here is what I did:

 // display the first item in the list of possible completions var myResponse = function( items ) { var itemToSuggest, p1, p2; if (items.length === 0) {return;} itemToSuggest = items[0]; this.element.val( itemToSuggest ); p1 = this.term.length; p2 = itemToSuggest.length; setSelectionRange(this.element[0], p1, p2); }; var oldFn = $.ui.autocomplete.prototype._response; $.ui.autocomplete.prototype._response = myResponse; 

Working example

Answer 2

You can see the jQuery UI autocomplete .

Full source code is available in the Git repository .

Answer 3

Something like Chosen will probably do the job well

http://harvesthq.github.com/chosen/

Answer 4

Use jQuery UI autocomplete autofocus. This should automatically focus on the first item found in the list.

Autofocus