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 [...]
July 5th, 2009 at 9:43 pm
[...] 4.) Proto!TextboxList meets Autocompletion [...]
July 5th, 2009 at 10:41 pm
[...] 4.) Proto!TextboxList meets Autocompletion [...]
July 6th, 2009 at 3:53 pm
[...] 4.) Proto!TextboxList meets Autocompletion [...]
July 6th, 2009 at 10:56 pm
[...] 4.) Proto!TextboxList meets Autocompletion [...]
July 9th, 2009 at 4:37 am
[...] Proto! Textbox list meets auto-completion [...]
July 11th, 2009 at 2:55 pm
[...] 4.) Proto!TextboxList meets Autocompletion [...]
July 20th, 2009 at 7:26 pm
[...] Proto! Textbox list meets auto-completion [...]
July 22nd, 2009 at 5:27 am
[...] 4.) Proto!TextboxList meets Autocompletion [...]
August 14th, 2009 at 1:54 am
[...] 4.) Proto!TextboxList meets Autocompletion [...]
August 15th, 2009 at 8:22 am
[...] 4.) Proto!TextboxList meets Autocompletion [...]
September 27th, 2009 at 1:00 am
[...] See the article here: Proto!TextboxList meets Autocompletion [...]
October 2nd, 2009 at 4:12 am
dear creator;
it is great , i have a question.
how can i post the entered data from the form to another php page ?
i need help
thanks
October 3rd, 2009 at 8:47 am
[...] Proto!TextboxList [...]
October 18th, 2009 at 5:54 pm
[...] 1. Proto!TextboxList (演示地址) [...]
October 27th, 2009 at 11:47 pm
[...] 4.) Proto!TextboxList meets Autocompletion [...]
November 17th, 2009 at 10:41 pm
[...] Download here VN:F [1.7.5_995]please wait…Rating: 0.0/10 (0 votes cast)VN:F [1.7.5_995]Rating: 0 (from 0 votes)Share it Tags: autocomplete, facebook, Prototype This entry was posted on November 17, 2009 at 11:41 pm, and is filed under Prototype. Follow any responses to this post through RSS 2.0. You can leave a response or trackback from your own site. [...]
December 18th, 2009 at 10:59 pm
[...] Demo Tutorial Posted in ajax | Tags: autocompletion, proto, textbox, TextboxList « Ajax [...]
December 29th, 2009 at 1:41 pm
[...] Proto! Textbox list meets auto-completion [...]
January 11th, 2010 at 1:23 am
[...] 4.) Proto!TextboxList meets Autocompletion [...]
February 14th, 2010 at 11:20 am
[...] J'ai trouvé ce script sur le blog de Guillermo Rauch, et sa déclinaison Prototype par EGBlue. [...]
March 6th, 2010 at 8:32 am
[...] 4.) Proto!TextboxList meets Autocompletion [...]
May 13th, 2010 at 10:37 pm
[...] Proto! 文本框列表的自动填充 [...]
May 29th, 2010 at 9:37 am
[...] Proto! 文本框列表的自动填充 [...]
June 16th, 2010 at 7:43 pm
[...] Proto! Textbox list meets auto-completion [...]
August 23rd, 2010 at 6:24 pm
[...] 4.) Proto!TextboxList meets Autocompletion Spoiler untuk [...]
October 11th, 2010 at 1:18 am
[...] Proto! TextboxList meets Autocompletion, [...]
October 17th, 2010 at 9:04 pm
have already been reading ur website around several days. really like your posts. btw i will be doing a research about this topic. do you know other websites or perhaps online forums in which I might learn more? thanks a ton.
October 23rd, 2010 at 4:47 am
[...] Proto! TextboxList meets Autocompletion, [...]
November 16th, 2010 at 5:48 am
Useful post would it be OK if i translate into Dutch for my sites visitors? Thanks
November 22nd, 2010 at 10:23 am
[...] Proto!TextboxList [...]
January 18th, 2011 at 6:25 am
[...] Proto! – TextboxList Meets Autocompletion This is the Prototype version of the extended script by Guillermo Rauch. As with the previous [...]
February 15th, 2011 at 8:42 am
[...] 4.) Proto!TextboxList meets Autocompletion PREVIEW DOWNLOAD [...]
July 28th, 2011 at 12:25 pm
This is a good article. I am a weblog writer myself and this is very substantial content. Maybe you could give me some guidelines sometime as a blogger? Thanks and keep up the excellent work. Send me an email:)
February 14th, 2012 at 7:34 am
After hours of Googleing, at last I got to your site. I wonder what is the Google’s problem that doesn’t rank on first page good websites like yours. Usually the top websites are full of spams.
February 15th, 2012 at 5:59 am
I’m extremely impressed together with your writing skills as smartly as with the layout on your blog. Is that this a paid topic or did you customize it yourself? Either way stay up the nice high quality writing, it’s uncommon to peer a nice blog like this one today..
February 17th, 2012 at 6:42 am
Can’t wait to read more of your articles in the future. Congrats!.
February 17th, 2012 at 4:21 pm
Imi place la nebunie blog-ul asta, tot la mai multe articole!
February 20th, 2012 at 4:15 am
I got what you intend, regards for putting up.Woh I am thankful to find this website through google. “No one can earn a million dollars honestly.” by William Jennings Bryan.
February 20th, 2012 at 5:36 am
Excellent website. All posts have a process to learn. Your hard work is very good and i enjoy you and wanting for some more informative posts.
March 5th, 2012 at 3:14 pm
I just say exactly what a relief to discover somebody who actually knows what theyre discussing on the web. You actually know how to bring a worry to light and make it important. More and more people need to read this and see why side from the story. I cant believe you are not popular because you definitely hold the gift.
March 9th, 2012 at 1:37 pm
That is getting a little bit far more subjective, but I considerably choose the Zune Marketplace. The interface is colourful, has a lot more flair, and several awesome functions like ‘Mixview’ that let you promptly see related albums, tracks, or other users connected with what you might be listening to. Clicking on a type of will middle on that item, and yet another set of “neighbors” will come into view, letting you to navigate close to exploring by similar artists, songs, or consumers. Speaking of users, the Zune “Social” can also be excellent enjoyable, permitting you discover other folks with shared preferences and becoming close friends with them. You then can listen to a playlist made determined by an amalgamation of what all of your buddies are listening to, which happens to be also satisfying. All those involved with privateness are going to be relieved to grasp you could avert the general public from seeing your own listening routines if you so opt for.
July 9th, 2012 at 6:59 am
[...] Proto! Textbox list meets auto-completion [...]
September 6th, 2012 at 5:14 am
Hello..
I want to submit the values in textbox using post…can you help me how can i retrieve the values…
November 15th, 2012 at 10:13 pm
Can we have Cut, Copy, Paste option for copying the fields from one TextBox to Another
March 4th, 2013 at 11:15 pm
[...] Proto! Textbox list meets auto-completion [...]