开发者

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

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜