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?
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
You can look into jQuery UI Autocomplete.
The complete source code is available in their Git repository.
Probably something like Chosen would do the job nicely
http://harvesthq.github.com/chosen/
Use the autofocus of the jQuery UI Autocomplete. This should automatically focus on the first found item in the list.
Auto focus
精彩评论