Reputation: 109

How to get autocompletion like Stack Overflow

I am trying to implement an autocompletion like Stack Overflow does for tag completion. however, I tried to view the source and its minified

I am trying to get features like letting the user add any tag, if it exists in the list then fine, or else add it to the database.

Are there examples out there that would show how to get something like this done? or can I somehow view the non minified version of the source?

Upvotes: 3

Answers (4)

Adrian Macneil

Reputation: 13263

Probably something like Chosen would do the job nicely

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

Upvotes: 1

Cheeso

Reputation: 192467

I don't know exactly how to do it, but. .. .

if you look into this answer: jQueryUI: how can I custom-format the Autocomplete plug-in results?

you can see there's a way to fiddle with jQuery's rendering logic to change how the menu items appear. There's also an internal jQuery function called renderMenu that actually presents the choices.

I haven't tried this but I suppose that by opening up that black box, and either replacing or rejiggering renderMenu and its related functions, you'd be able to do what you want - render just one item, in the actual textbox.

That is where I would start, anyway.

EDIT

I looked into the autocomplete stuff again in jQuery UI. It seems pretty straightforward to replace the menu display logic by inserting a custom response() function.

Here's 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

Upvotes: 2