3

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?

rene
  • 37,946
  • 78
  • 99
  • 132
curtis
  • 109
  • 1
  • 5
  • 2
    They use a modified version of the [jQuery autocomplete plugin](http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/) I believe, but since that is deprecated you should be using jQuery UI autocomplete like what Frederic says – Yi Jiang May 28 '11 at 15:17

4 Answers4

2

You can look into jQuery UI Autocomplete.

The complete source code is available in their Git repository.

Frédéric Hamidi
  • 240,249
  • 39
  • 455
  • 462
  • i looked into jquery UI autocomplete examples however, there is no example that shows adding elements that don't already exist in the list. Furthermore, user has to click up down arrow or select the item from the list. meaning as you type, the item is not already preselected – curtis May 28 '11 at 15:14
  • hmm looking at multiple, remote example http://jqueryui.com/demos/autocomplete/#multiple-remote I guess I can send the whole list to backend and loop through it, if it does not exist then add it. however, still would like preselection as the user types rather than user having to click on the item they want – curtis May 28 '11 at 15:18
  • @curtis, that's why I thought you wanted a link to the unminified source, i.e. to understand it and add the behavior you want to implement. The code of StackOverflow is customized in the same way. – Frédéric Hamidi May 28 '11 at 15:20
2

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

Community
  • 1
  • 1
Cheeso
  • 180,104
  • 92
  • 446
  • 681
  • thats interesting but why it is not showing all the items that are available? – curtis May 28 '11 at 23:28
  • I built on top of your working example and had a new question: http://stackoverflow.com/questions/6165647/jqueryui-items-getting-erased-when-adding-an-item-that-doesnt-exist – curtis May 29 '11 at 02:40
  • sorry, curtis I misunderstood the question. I thought you wanted a one-word completion in the text box, *instead of* the drop down menu. Maybe what you want is a a suggestion in the text box *in addition to* the dropdown menu. – Cheeso May 29 '11 at 11:49
1

Probably something like Chosen would do the job nicely

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

Adrian Macneil
  • 12,203
  • 4
  • 49
  • 68
0

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

Auto focus

kufi
  • 2,226
  • 18
  • 14