Proto!TextboxList meets Autocompletion

February 11th, 2008 by EGBlue

auto.png

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.

Click here to see demo

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:
[html]

 

Type the name of an argentine writer you like

  • Jorge Luis Borges
  • Julio Cortazar

[/html]
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

98 Responses

  1. Cheeseroll

    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!

  2. EGBlue

    @ 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.

  3. Provocative » Blog Archive » Proto!TextboxList meets Autocompletion

    [...] read more | digg story [...]

  4. Cheeseroll

    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!
    :)

  5. anglictina

    Nice work

  6. Ajaxian » Facebook Style Input Box

    [...] 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 [...]

  7. Chris

    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 :)

  8. Ajax Girl » Blog Archive » Facebook Style Input Box

    [...] 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 [...]

  9. purrl.net |** urls that purr **|

    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 …..

  10. EGBlue

    @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.

  11. deStone

    Anyone ported this to jquery?

  12. Facebook » Proto!TextboxList meets Autocompletion | InteRiders

    [...] 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 [...]

  13. Facebook » Proto!TextboxList meets Autocompletion | InteRiders

    [...] 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 [...]

  14. Kiliman

    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!

  15. db

    Doesn’t work under Firefox. :(

  16. Caminews » Proto!TextboxList meets Autocompletion | InteRiders

    [...] Fonte: http://www.interiders.com/2008/02/11/prototextboxlist-meets-autocompletion/ [...]

  17. links for 2008-02-15

    [...] 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) [...]

  18. Javascript News » Blog Archive » Facebook Style Input Box

    [...] 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 [...]

  19. nerdd.net | news and opinion

    Proto!TextboxList meets Autocompletion | InteRiders | nerdd.net…

    Cool multiSuggestion tool, like facebook and apple. Based on Prototype library interiders.c…

  20. napyfab:blog» Blog Archive » links for 2008-02-15

    [...] Proto!TextboxList meets Autocompletion | InteRiders (tags: autocomplete javascript prototype facebook script development webdev programming web) [...]

  21. EGBlue

    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!

  22. SiNi Daily » Blog Archive » Facebook Style Input Box

    [...] Well, the folks at InteRiders wanted to get in on this Facebook goodness so they created a Prototype version of this control. [...]

  23. Stefan

    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?)

  24. Liam

    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.

  25. Fannar

    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.

  26. links for 2008-02-19 « J.Uma Shankar Ladha

    [...] Proto!TextboxList meets Autocompletion | InteRiders (tags: ajax design javascript interface ui facebook prototype autocomplete development web) [...]

  27. mirec

    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?

  28. mirec

    … 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;”

  29. mirec

    of course “return false;’ must go out if submit has to actualy take place, i’ve just put it there while testing in firebug…

  30. Arsenalist

    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.

  31. Ingo

    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.

  32. Tester

    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 ?

  33. EGBlue

    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/

  34. dan

    how do i create 2 instances of facebookLists in the same page?

  35. akira

    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 $)

  36. Adolfo Abegg

    neat!

  37. Mayank

    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..

  38. kururan

    hi,

    how can we prevent default add of those two author names when the control is load?

  39. Nirauthan

    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?

  40. Chris Berry

    Is there a way to load the page without the text box having values in it. Just load it empty

  41. 28 Autocomplete Scripts « The Adventures of Amit Dua

    [...] Proto!TextboxList [...]

  42. nahum

    for delete the two records just remove the tags:

    Jorge Luis Borges
    Julio Cortazar

    in the test.html page

    saludos… :)

  43. nahum

    how can I assign a callback fuction for someone select a row or name either click in a name, is this posible?,

  44. rob

    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?

  45. Alexwebmaster

    Hello webmaster
    I would like to share with you a link to your site
    write me here preonrelt@mail.ru

  46. 70 New, Useful AJAX And JavaScript Techniques | ClickLogin Web Design

    [...] Proto! Textbox list meets auto-completion [...]

  47. 70 New, Useful AJAX And JavaScript Techniques

    [...] Proto! Textbox list meets auto-completion [...]

  48. Tecniche, plugin e trucchi per AJAX - ReFactor.it

    [...] Proto! Textbox list meets auto-completion [...]

  49. Edison A. Leon

    Great snip. Will it work on IE8?

  50. deniar

    Wow nice thanks… i’ll try it

  51. John

    This does not display correctly in IE8 without compatibility mode. Can you please look into this?

  52. naveen

    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?

  53. Hello world! « Trungquy’s Blog

    [...] Proto! Textbox list meets auto-completion [...]

  54. 20+ Ready to Use Auto Completion Scripts  | Dzine Blog

    [...] 4.) Proto!TextboxList meets Autocompletion [...]

  55. 20+ Ready to Use Auto Completion Scripts | KolayOnline

    [...] 4.) Proto!TextboxList meets Autocompletion [...]

  56. 20 Auto completion Ajax script miễn phí | PCSpace Việt Nam | Tin tức, đánh giá, bình luận và blog về Công nghệ, IT

    [...] 4.) Proto!TextboxList meets Autocompletion [...]

  57. 20+ Ready to Use Auto Completion Scripts | Desinine

    [...] 4.) Proto!TextboxList meets Autocompletion [...]

  58. 70 New, Useful AJAX And JavaScript Techniques « Ramesh

    [...] Proto! Textbox list meets auto-completion [...]

  59. Muhammad Abdullah Sheikh » Blog Archive » Ready to Use Auto Completion Scripts for Websites/Web Applications

    [...] 4.) Proto!TextboxList meets Autocompletion [...]

  60. 70 New, Useful AJAX And JavaScript Techniques | Rystereology

    [...] Proto! Textbox list meets auto-completion [...]

  61. 21 Scripts para Autocompletar Listos para Utilizar @ Ciberdix 2.0 :: Blog Creativo!!

    [...] 4.) Proto!TextboxList meets Autocompletion [...]

  62. 20+ Ready to Use Auto Completion Scripts « test

    [...] 4.) Proto!TextboxList meets Autocompletion [...]

  63. 20+ Ready to Use Auto Completion Scripts | X Design Blog

    [...] 4.) Proto!TextboxList meets Autocompletion [...]

  64. Proto!TextboxList meets Autocompletion | My Web Development Bookmarks

    [...] See the article here: Proto!TextboxList meets Autocompletion [...]

  65. alaa george sdiab

    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

  66. XanelaWeb – Diseño, web y nuevas tecnologías » Scripts de autocompletado de texto

    [...] Proto!TextboxList [...]

  67. 33个JavaScript自动完成脚本 | 嘿嘿哈

    [...] 1. Proto!TextboxList (演示地址) [...]

  68. CoffeeIT.Net » Blog Archive » 20+ Ready to Use Auto Completion Scripts

    [...] 4.) Proto!TextboxList meets Autocompletion [...]

  69. Proto!TextboxList- Facebook Like Input « Ajax Freak

    [...] 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. [...]

  70. TextboxList meets Autocompletion | Proto | Ajaxmint - Endless Ajax samples on jQuery, MooTools, ExtJS, Dojo, Prototype and PHP

    [...] Demo  Tutorial  Posted in ajax | Tags: autocompletion, proto, textbox, TextboxList « Ajax [...]

  71. 70 Great, Useful AJAX And JavaScript Techniques « Social-Press

    [...] Proto! Textbox list meets auto-completion [...]

  72. Ajax自动提示代码库 | RIA Worlds

    [...] 4.) Proto!TextboxList meets Autocompletion [...]

  73. Champ de saisie FaceBook like « Blog d'Eric BATARSON

    [...] J'ai trouvé ce script sur le blog de Guillermo Rauch, et sa déclinaison Prototype par EGBlue. [...]

  74. 20+ Ready to Use Auto Completion Scripts | Design Trip Blog

    [...] 4.) Proto!TextboxList meets Autocompletion [...]

  75. 70个新鲜实用的JavaScript和Ajax技术【推荐】

    [...] Proto! 文本框列表的自动填充 [...]

  76. 70个新鲜实用的JavaScript和Ajax技术

    [...] Proto! 文本框列表的自动填充 [...]

  77. Geek is a Lift-Style. »Archive » 70 New, Useful AJAX And JavaScript Techniques

    [...] Proto! Textbox list meets auto-completion [...]

  78. [AJAX] 20+ Ready to Use Auto Completion Scripts

    [...] 4.) Proto!TextboxList meets Autocompletion Spoiler untuk [...]

  79. 30 Auto Completion Scripts for Better User Experience | Free Web Design Tucson

    [...] Proto! TextboxList meets Autocompletion, [...]

  80. Russ Zaspel

    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.

  81. 30 Auto Completion Scripts for Better User Experience « qeqnes | Designing. jQuery, Ajax, PHP, MySQL and Templates

    [...] Proto! TextboxList meets Autocompletion, [...]

  82. Mauricio Cassio

    Useful post would it be OK if i translate into Dutch for my sites visitors? Thanks

  83. Scripts de autocompletado de texto para web : XanelaWeb

    [...] Proto!TextboxList [...]

  84. 150 JavaScript Techniques

    [...] Proto! – TextboxList Meets Autocompletion This is the Prototype version of the extended script by Guillermo Rauch. As with the previous [...]

  85. Blog Maulana Hosting » Blog Archive » 21 AJAX Ready to Use Auto Completion Scripts

    [...] 4.) Proto!TextboxList meets Autocompletion PREVIEW DOWNLOAD [...]

  86. proflight simulator suite review

    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:)

  87. black gay

    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.

  88. uk online casino

    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..

  89. video gay

    Can’t wait to read more of your articles in the future. Congrats!.

  90. zuppy

    Imi place la nebunie blog-ul asta, tot la mai multe articole!

  91. Domitila Vanwey

    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.

  92. Alan Urias

    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.

  93. العاب

    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.

  94. Orpha Eckerman

    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.

  95. 70 New, Useful AJAX And JavaScript Techniques | PSDSir

    [...] Proto! Textbox list meets auto-completion [...]

  96. Pournima

    Hello..
    I want to submit the values in textbox using post…can you help me how can i retrieve the values…

  97. VP

    Can we have Cut, Copy, Paste option for copying the fields from one TextBox to Another

  98. 70 New, Useful AJAX And JavaScript Techniques | Internet Business

    […] Proto! Textbox list meets auto-completion […]

Leave a Comment

Please note: Comment moderation is enabled and may delay your comment. There is no need to resubmit your comment.

About InteRiders

Welcome to InteRiders Inc. Our company is located in the San Fernando Valley, California. We specialize in development of web-based systems using cutting edge technologies. In this site we will share with the readers some pieces of codes along with insights into projects we've been working on. Hopefully others could benefit from our work. Have great reading.

Ran Grushkowsky, CEO