Proto!TextboxList meets Autocompletion
This is the Prototype version of the extended script by Guillermo Rauch. As with the previous script, this script has been converted and operates like the original. An extended and upgraded version will be posted later on this week, if you have any comments or requests, please post them and I will try to include all the requested features in the upcoming Proto release.
Here is the original post by Guillermo that describes the script:
In my previous blogpost I explained how to extend TextboxList to add closing functionality via a link added to each box. But it was missing an important ingredient: autocompletion!
Again, all we have to do is extend the TextboxList class, override some methods, some events, and create some new ones (all prefixed by auto)
It works by caching all the results from a JSON Request and feeding them to the autocompleter object. When a item is added as a box, it’ removed from the feed array, and when the box is disposed it’s added back, so that it becomes available in the list when the user types.
Another new feature is that you’ll be able to let it add boxes from the HTML directly:
The constructor now takes new parameters to configure the autocompletion, like the minimum number of characters to trigger the dropdown, and more.
Download
Click here to download the script
New version is out, check it out!
Posted in Prototype/JavaScript/Ajax
February 12th, 2008 at 7:23 am
Awesome! One question..I am using C#-JSON.ASPX, the issue is that I am retrieving hundreds and thousands of data-causing delays.
Is their a way somehow to filter the data each time the user enters a letter?
Thanks in advance!
February 12th, 2008 at 9:03 am
@ Cheeseroll, I’m not sure I understand your request. You’d like it to fetch the list as you type rather than load it at first? If so, I think i could add that feature so you’ll have to set a flag, if set to true, it will do that, otherwise, it will preload the list for faster fetching.
February 12th, 2008 at 2:09 pm
[...] read more | digg story [...]
February 13th, 2008 at 1:00 am
Greetings,
I have a list with 900000(from DB) names-this number will increase in the future.
It takes very long time for the JSON.ASPX to load all these data. So do you have any suggestions how to filter these data?
Maybe somehow passing a querysting to the JSON.ASPX file…so I can filter my Query to the DB and fetch less data each time.
I hope its clear what I am asking.
Thanks for your support!
February 15th, 2008 at 2:05 am
Nice work
February 15th, 2008 at 6:23 am
[...] the folks at InteRiders wanted to get in on this Facebook goodness so they created a Prototype version of this control. This is the Prototype version of the extended script by Guillermo Rauch. As with the previous [...]
February 15th, 2008 at 6:54 am
It would be nice if the result list would be clickable.. right now the arrow and enter keys work, but when i click a result it does not work
February 15th, 2008 at 7:16 am
[...] the folks at InteRiders wanted to get in on this Facebook goodness so they created a Prototype version of this control. This is the Prototype version of the extended script by Guillermo Rauch. As with the previous [...]
February 15th, 2008 at 8:06 am
This is one of the web’s most interesting stories on Fri 15th Feb 2008…
These are the web’s most talked about URLs on Fri 15th Feb 2008. The current winner is …..
February 15th, 2008 at 8:37 am
@Chris Which browser were you testing it on? The results should be clickable. Please let me know so the fix will be included in the next coming version.
Thanks
@Cheeseroll I understand your suggestion, and will add it as a feature on the next release.
February 15th, 2008 at 8:49 am
Anyone ported this to jquery?
February 15th, 2008 at 9:22 am
[...] Product Reviews Net wrote an interesting post today on Proto!TextboxList meets Autocompletion | InteRidersHere’s a quick excerpt…bookmark this on del.icio.us - posted by innerewut to javascript autocomplete prototype facebook script ajax development web ui webdev widget and [...]
February 15th, 2008 at 9:35 am
[...] Horny Oyster wrote an interesting post today on Proto!TextboxList meets Autocompletion | InteRidersHere’s a quick excerpt…bookmark this on del.icio.us - posted by innerewut to javascript autocomplete prototype facebook script ajax development web ui webdev widget and [...]
February 15th, 2008 at 11:05 am
I noticed that the MooTools and Prototype versions are different from Facebooks implementation. With Facebook, the matching is only done on the start of each word, whereas the others do the matching anywhere in a word.
As long as your search list is relatively short, this shouldn’t be an issue, but could potentially bring back lots of results.
I’m not even sure that “anywhere in a word” is what I would consider expected behavior, since most autocomplete implementations that I’ve seen filter from the start of a word.
Anyway, these are pretty cool components.
Thanks!
February 15th, 2008 at 11:41 am
Doesn’t work under Firefox.
February 15th, 2008 at 12:10 pm
[...] Fonte: http://www.interiders.com/2008/02/11/prototextboxlist-meets-autocompletion/ [...]
February 15th, 2008 at 12:26 pm
[...] Proto!TextboxList meets Autocompletion | InteRiders This is the Prototype version of the extended script by Guillermo Rauch. As with the previous script, this script has been converted and operates like the (tags: autocomplete code library prototype) [...]
February 15th, 2008 at 12:41 pm
[...] the folks at InteRiders wanted to get in on this Facebook goodness so they created a Prototype version of this control. This is the Prototype version of the extended script by Guillermo Rauch. As with the previous [...]
February 15th, 2008 at 2:01 pm
Proto!TextboxList meets Autocompletion | InteRiders | nerdd.net…
Cool multiSuggestion tool, like facebook and apple. Based on Prototype library interiders.c…
February 15th, 2008 at 3:27 pm
[...] Proto!TextboxList meets Autocompletion | InteRiders (tags: autocomplete javascript prototype facebook script development webdev programming web) [...]
February 15th, 2008 at 3:32 pm
Guys, i would appreciate if you could help me replicate the error on FF2. I just can’t seems to get it to not select by mouse. Are you using Mac/PC? How exactly how you about doing that? I need to replicate the error in order to fix it. thanks!
February 17th, 2008 at 2:58 am
[...] Well, the folks at InteRiders wanted to get in on this Facebook goodness so they created a Prototype version of this control. [...]
February 17th, 2008 at 12:22 pm
Epic! An AJAX querystring as suggested by cheeseroll would be awesome!
Is it possible to add “tags” that aren’t in the JSON result yet, but without breaking the autocomplete functionality? (e.g. seperated by commas?)
February 17th, 2008 at 5:47 pm
I also was having the same issue with the clickability. Arrows work fine, but clicking closes the list but doesn’t add the clicked name to the box. I’m using FF2 on a PC, not sure what other info might be helpful.
February 17th, 2008 at 5:59 pm
Safari 3.0.4 on OS X 10.5.2:
When on my second line of adding names, clicking on names with my mouse stops working. So when I enter “j” for the first time and select some name with my mouse it gets added to the list. When I have done this several times and on my second line of names, clicking stops working, just closes the list and nothing happens.
Looking forward for the next release.
February 18th, 2008 at 6:17 pm
[...] Proto!TextboxList meets Autocompletion | InteRiders (tags: ajax design javascript interface ui facebook prototype autocomplete development web) [...]
February 19th, 2008 at 1:43 am
How do i submit the form with data? Whatever i do, it does not submit anything… looks like facebook-demo field is empty… i see that it is stored in ordered list, but field facebook-demo is not filled with any data for submit.
Any idea?
February 19th, 2008 at 1:57 am
… and is there a chance without much coding to have id/name pairs, i mean, that name would be shown in list, but ID would be submitted.
btw. i got submit working by adding this to my submit button in form:
onclick=”tlist2.update(); $(’facebook-demo’).value = $F(’facebook-demo’);return false;”
February 19th, 2008 at 1:58 am
of course “return false;’ must go out if submit has to actualy take place, i’ve just put it there while testing in firebug…
February 19th, 2008 at 11:47 am
Is there support for only selecting non-duplicate values? It would be a nice feature.
Also, having an option to have a limit on the number of selections would be nice.
February 23rd, 2008 at 3:49 pm
the id/name pairs would be nice, also the fetching of data as you type, with the minimum number of letter configurable, for example: do the search after 3 letters.
February 24th, 2008 at 5:00 am
I would love to use this control. But I have one “feature” which I don’t think this solves it right now. So I need a control where users can select a email from the given list OR also add a new email. Is there any way you can support this ?
February 24th, 2008 at 7:03 pm
Guys, many of your requests have been addressed in the new version. Please check it out:
http://www.interiders.com/2008/02/18/protomultiselect-02/
March 27th, 2008 at 5:16 am
how do i create 2 instances of facebookLists in the same page?
April 10th, 2008 at 8:08 am
Hi! I want submit little bug
if use two prototextboxlist on page,
object use last fetchFile.
FIX: this.fetchFile = this.options.get(’fetchFile’);
AND use this
if (!Object.isUndefined(this.fetchFile)) {
new Ajax.Request(this.fetchFile, {
parameters: {keyword: input.value},
onSuccess: function(transport) {
transport.responseText.evalJSON(true).each(function(t){this.autoFeed(t)}.bind(this));
this.autoShow(input.value);
}.bind(this)
});
}
PS Sorry for my bad english $)
June 4th, 2008 at 6:08 am
neat!
July 31st, 2008 at 5:04 am
This is awsome stuff…but am not able to add new entry(i mean new text) in the text box…i can add only the suggested text..so can u pls tel me that how to add new entry in the textbox when we press enter or comma…
thanx a lot..
August 11th, 2008 at 1:54 am
hi,
how can we prevent default add of those two author names when the control is load?
August 12th, 2008 at 6:07 am
hi,
It is working fine.In the page load, it shows two boxes.how can we create these boxes when we click on the text in suggested list?
How can we get the box as empty in the page load event?
please help me to do this?
September 5th, 2008 at 11:30 am
Is there a way to load the page without the text box having values in it. Just load it empty
October 11th, 2008 at 11:01 pm
[...] Proto!TextboxList [...]
December 13th, 2008 at 6:26 pm
for delete the two records just remove the tags:
Jorge Luis Borges
Julio Cortazar
in the test.html page
saludos…
December 13th, 2008 at 6:27 pm
how can I assign a callback fuction for someone select a row or name either click in a name, is this posible?,
December 28th, 2008 at 7:46 pm
hey,
just wondering how you would dispose the whole list, i am using an ajax function with the input when the add button is clicked, so I want to clear the input box after add is clicked.
any ideas?
March 3rd, 2009 at 2:51 am
Hello webmaster
I would like to share with you a link to your site
write me here preonrelt@mail.ru
March 9th, 2009 at 1:35 pm
[...] Proto! Textbox list meets auto-completion [...]
March 9th, 2009 at 10:48 pm
[...] Proto! Textbox list meets auto-completion [...]
March 16th, 2009 at 9:53 am
[...] Proto! Textbox list meets auto-completion [...]
March 16th, 2009 at 12:44 pm
Great snip. Will it work on IE8?
March 25th, 2009 at 2:53 am
Wow nice thanks… i’ll try it
April 1st, 2009 at 8:06 pm
This does not display correctly in IE8 without compatibility mode. Can you please look into this?
May 7th, 2009 at 4:39 am
hi
this is good but it`s not working in internet explorer and also I dont want any decorations for he inserted values can we remove those decorations?
June 19th, 2009 at 9:49 pm
[...] Proto! Textbox list meets auto-completion [...]