Proto!MultiSelect 0.2

February 18th, 2008 by EGBlue

untitled-1.jpg

Hey everybody. It didn’t take long before glitches and features were reported, so first of all, i’d like to thank all of you for taking the time to check out the code and report all the bugs you found, it really helped taking the script further, i’m sure that the next build will not be perfect and that’s why your help is still needed to keep checking and suggest new cool features for next versions.

In this build I tried to include all the suggested features, I hope that nobody will be disappointed. There are also few bug fixes but most features upgrade. I encourage all of you to suggest any features you have in mind, because what might be useful for you, may be useful to others, so please do so..

The new version incorporates few new options:

  • fetchFile – default: undefined; a JSON file that is being called with the parameter keyword whenever a key is being typed
  • results – default: 10; the number of results to display before showing a scrollbar, if more results match a scrollbar is displayed
  • wordMatch – default: false; when set to true will match only the beginning of word, otherwise will match anywhere

Here is a list of changes on this upcoming build, and by the way, the name has been changed to Proto!MultiSelect in order to avoid confusion with our dearest friend’s, Guillermo Rauch, project.

- 0.2: renamed from Proto!TextboxList to Proto!MultiSelect, added new features/bug fixes
added feature: support to fetch list on-the-fly using AJAX Credit: Cheeseroll
added feature: support for value/caption
added feature: maximum results to display, when greater displays a scrollbar Credit: Marcel
added feature: filter by the beginning of word only or everywhere in the word Credit: Kiliman
added feature: shows hand cursor when going over options
bug fix: the click event stopped working
bug fix: the cursor does not ‘travel’ when going up/down the list Credit: Marcel

Fixed 02/19/08

A glitch where deleted records are not being re-added to the list. – suggested by  Antoine

Demo

Click here for demo

Download

Click here to download

Posted in Prototype/JavaScript/Ajax

157 Responses

  1. Proto!TextboxList meets Autocompletion | InteRiders

    [...] New version is out, check it out! [...]

  2. Antoine

    Hello,

    thank you so much for your work ;-)

    i notice a bug in this version, if fetchFile is undefined, the originally json and javascript seems to not work correctly.. because i press key A i select sylvia and i delete sylvia and i press the key A again and sylvia doesn’t appear again .. strange , i think it’s a bug no ?

    thank you again for you work ;-)
    have a great day

    Antoine

  3. louis w

    Great update, really excited about this tool.

  4. EGBlue

    Dear Antoine, Thank you for suggesting the error, it has been fixed, please grab the latest file.

  5. Mon Villalon

    It would be great if you could add elements that are not in the json list.
    If you would use this for a email application you can only add people that are already in your address book ( json file) but coudn’t send emails to somebody new.

    Right now if you write something and press enter even if not in the list it will add the “closest match” or really the first of the last matched elements.

    Maybe you could add an option to auto end tags and add them to the list.
    Following the email app example you set the options

    allowNotInList: true ,
    delimeters: ["," ] ,
    appendOnEnter: true ,
    cancelOnEscape: true

    now when you type enter or a comma
    the new value will be appended to the list regardless if its in the json store.

    BTW, Great Work..

  6. Stefan

    @Mon Villalon: I agree, that would be a great feature!

  7. Facebook » Proto!MultiSelect 0.2 | InteRiders

    [...] http://www.druidacelta.net wrote an interesting post today on Proto!MultiSelect 0.2 | InteRidersHere’s a quick excerpt…bookmark this on del.icio.us – posted by robarov to ajax prototype ui facebook autocomplete and saved by people… [...]

  8. CFDev

    Any support for ColdFusion in the future?

  9. EGBlue

    @Mon Villalon
    Thanks, that would definitely be worth implementing in the next build.

  10. bunyamin

    Thanks for this script.
    But how can i prevent twice input values. for example,
    when “Alicia Partnoy” inputs, it must remove this value from listbox below. It couldnt inputs again…
    thank you again for you work

  11. sem

    I want to call input values “[{"caption":"Sylvia Molloy","value":5}]” from test.html except using fetchfile
    I dont want to use fetchfile. how can i do this?

  12. leon

    Can I use 2 Proto!MultiSelect inputs on 1 html page with different json fetchfiles? When I try, both inputs use the same fetchfile…

  13. Loren

    I’ve made several small fixes for my own purposes and generally. Leon: I had the same problem when adding more than one control to the page and fixed it by making another attribute within FacebookList and assigning it the value of the inherited attribute like this:

    this.fetchfile = this.options.get(‘fetchFile’);

    Then replacing this.fetchfile for this.options.get(‘fetchFile’); throughout. Hope that helps. There are other inheritance issues related to removing entries when their are multiple controls on the page which I’ve not yet figured-out…

  14. Loren

    Hey — I’ve posted my thoughts and updates to this control on my blog.

    This version will, among other things, allow multiple controls on one page and allow the option of creating new values:

    multiselect-facebook-list-redux

  15. tr

    Great job on the plugin. Seems to work great for me. One small thing(not about performance, but more versatility than anything).. the css could be a little friendlier for future releases and not so customized for the example.(have just that control’s css scoped together, rather than mixed in with other elements) Most users will need to grab the css and plug it into their existing apps and it just isn’t possible without redoing most of it. Please don’t take it as a complaint, its a great tool!

  16. Loris

    Great script, i was wondering how to make it working well with utf-8 encoding. I’m having issues with accents and stuff.

  17. Jim

    Awesome! Thank you! I’d like to include it in the application I am working on.
    One question: After you press Enter to select the first entry, and then try to type in the second entry, you need press 1st letter key twice before it comes up. I am using IE6. Is this a bug? If I use mouse to select the first entry, then it works fine. Thanks!

  18. Magus Creo » Blog Archive » People Searchin’

    [...] from database Ajax Auto Suggest v.2 Facebook List TextboxList with AutoCompletion Proto!MultiSelect 0.2 TextboxList meets [...]

  19. ulas

    how do you submit this form ?

  20. PMc

    Hi,

    I was wondering how easy or difficult is it to implement pagination for this control.

    Any thoughts or pointers of how to do this?

  21. Andru

    Just wanted to say thanks, this is a great little tool that I will be using in my next project.

  22. finth

    Hi, first of all thanks for this great tool, I have tweaked this a bit and using it for my need.

    I was trying to update the list with new set of data retreived from another ajax call. Any hints would be highly appreciated. I tried to some thing like newRespText.evalJSON(true).each(function(t){tlist2.autoFeed(t)});
    This is appending the values to the existing ones, i would like to clear off the old ones and add these new ones to the dropdown.
    Thanks in advance,

  23. mech

    Hi, I am using this for my edit page which naturally I populated the list manually like this:

    mech

    The JSON list also include this “mech” name, is there a way to remove it when it senses that it has already been included?

  24. Charmaine

    Can this work in IE 7? It doesnt work in mine but it works in Firefox

  25. Michael

    Hi, the tools is nice but i would like to know is there a way to show more information in the listing .. e.g like facebook it can show Country Name as subtitle in the autoshow listing.
    And it block the duplication selection

  26. Joe Pellicer

    This is fantastic. I love it and everyone I show this to loves it too.
    I’ve got a problem I hope you can help me debug.
    I want to fetch a php file that creates a list of keywords, but the autocomplete doesn’t work.
    If I copy the result of the php file, paste it in another document and fetch it, it works.
    I’ve tried sending headers, j-son, text, html… nothing.
    Any ideas or workarounds are welcome
    Thank you

  27. MH

    Hey EGBlue
    Having a hard time getting your email address. Drop us a line. Thanks.

  28. Christopher Souvey

    I’ve found a bug in IE7 (likely IE6 as well, but havn’t been able to test it). When a line break should occur in the middle of an element, in FF, it pushes the whole element to the next line. In IE7, however, the line break occurs within the element, and so some elements at the end of each line are multi-line. (By ‘element’, I mean one name, with its own X)

  29. JEDI » Blog Archive » links for 2008-05-16

    [...] Proto!MultiSelect 0.2 | InteRiders (tags: autocomplete javascript prototype) [...]

  30. Friedman

    Hi,

    Is there a way to get the data from a mysql database, instead of a php file ?

    Thank You

  31. Ran

    Friedman, just have the .php get the data from a mysql database and print it.

  32. ozkan

    Thanks for nice job guys! Can someone please explain clearly how to submit this form? After the button click we get values in an alert message but i need to get values as a variable. PLEASE HELP!!! Thanks!

  33. Scot

    Are there any docs for this product?
    I am struggling with passing my input through to a php script for an sql query.
    Thanks!

  34. Ben

    The ajax request for the fetchFile should be a GET request instead of a POST request, as you are fetching results, not creating new entries…

  35. Blaz

    I’ve tryed to use two facebook lists on same page with two different fetchFile options. Initalization is fine, but when typing for autocomplete the latest initialized fetchFile option is used for autocomplete lookup. To sum up both input boxes use the same fatchFile.
    while debugin the code it seems as
    input.observe(‘keyup’,function(e) { .. }.bind(this));
    binds ‘this’ to the last initalized instance of FacebookList class. (this code is located in in class FacebookList in function -> createInput: function($super,options)). Why is this? is this a prototype issue?

    thanks

  36. Jay

    Great stuff. Thanks.
    One future feature request: the ability to limit the number of choices the user can make (or is that easy to do with the current code?).
    @Loris: Did you manage to get it working with UTF-8? Ihave the same need – different characters sets, including chinese.

  37. Scott Phillips

    Love the script! Quick question, if I want to use this in a regular form, how do i access the results on my php page? For example, if I am submitting to test_submit.php, I can’t seem to retrieve the values…

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

  39. srinivasan

    Hi,

    I need to include two multiselect boxes in a single page with two different fetchfiles.
    But it seems to be taking the same file for fetching the result.
    How it can be solved, can any one help me out for this cause..

    I am really need this…

    Tnx,
    Srini

  40. srinivasan

    Hi EGBlue,

    There is a issue with the current version with firefox/safari browsers.

    If the autocomplete textbox field is hide (div id display none) and when we opened(showing) the autocomplete textbox to visible by javascript(div id display inline) the problem occurs.

    The problem is when we type the keywords for example INDIA in the textbox field and then erase (by pressing backspace or delete), we can ‘t able to type the keywords again in the textbox field.

    This issue rised in the firefox/safari browsers. please can you sort out this issue.

    I am expecting your results sooner, because i need this.

    Thanks and Regards,
    Srinivasan M

  41. jdoe

    Is there any setting where you can just allow only 1 item to be selected and the textbox style would color the entire textbox with no close option?

  42. srinivasan

    hello,

    how we can remove the selected multiple id’s just after submitting the form
    and also clear all the selection if we cancel the form by clicking close button or something like that.

    For clearly, if we use the autocomplete search via ajax. So, after selecting the multiple id’s i need to submit the data via ajax and do the process.

    So, Once again if i click the form again — i should not want to see the previously selected names from the autocomplete textbox list.

    Could anyone help me to sort out this.

    Thanks,
    Srinivasan

  43. Francisco

    Is there a way to limit the number of choices in the input field? (let’s say 3)
    …and…
    Where are the input selections stored? (Is there an array somewhere?) I need to get them to store them in a DB.

    Thanks for the script, works great!

  44. kururan

    hi,
    i have used this with .NET 3.5.When i run this ,it shows default list items only.If i type any character it does not show any suggestion.Because the
    fetched.php file can not be read in .net.How can i resolve this.how can i use this in DOTNET

    Thanks.

  45. srinivasanm

    Hi Kururan,

    There is no necessary to use the .php file — you can use .txt files too for your purpose — just try it as fetched.txt.

    it’s working… have a try..

    Srini

  46. taf2

    Hi
    You should put this code some where we can all contribute. Github, google code… somewhere like that would be cool. Great work!

    -Todd

  47. Tommy

    When implementing this the close.gif is positioned at the top-right of the browser-window instead of after the text. This is probably due to the 3-column layout I’m using, but this could have been solved wrapping the text and link in the LI element with SPANs and float them. I could not figure out how to modify “createBox” in a way that would fix this. Without the close function users will have to use backspace to remove items… :-(

  48. Tommy

    Found a bug, well at least soemthing I consider a bug. If you have multiple Multiselects on a single page, they cannot have different “fetchFile”. They all will use the same fetchFile.

    At least I haven’t been able to use different fetchFile for my three Multiselects… :-(

  49. Jquery!MultiSelect 1.0 | Just another facebook application | Facebook Counter

    [...] that I saw Proto!Multiselect here. I really liked and decided to port this solution to Jquery. The result you can see in demo [...]

  50. srinivasanm

    I need to search a special character in the fetch file.
    How we can achieve with this plugin.

    Example:
    The fetch file consists of the json formated data as Kölner Haie.

    If i type kolner in the text box to fetch the result — it should display the Kölner Haie. But it seems to be not working like that.

    Can anyone suggest me — how we can achieve this — with this autocomplete js lib.

    Thanks
    Srinivasan M

  51. Moises

    Thanks!!!!

    From Colombia, Thank You very much =)

  52. Tolka

    Thanks for nice job guys! Can someone please explain clearly how to submit this form? After the button click we get values in an alert message but i need to get values as a variable. PLEASE HELP!!! Thanks!

  53. Webnetter

    i don’t know if this normal, but i add to modify the “add” function to make it worked
    ———————–
    this.bits.set(id, $pick(html, text).caption);
    ———————-

  54. Hamdi

    Scroll bar is shown even for a list with one item. Is it possible to disable it for lists with items less than a limit?

  55. Mike

    hi,

    great script but there is an error.
    if i choose a word by a mouseclick and after the word has been taken to the input-field, i press enter, the word will be added again.

    would be great if this could be fixed.

    thx,
    mike

  56. Abdi Gulaid

    Hi, the script doesn’t work in IE7, but does work in Firefox… How comes?

    would love any feedback.

  57.   jQuery Dynamic TextboxList with Autocomplete by bigredswitch

    [...] this prototype port, it’s not a line-by-line port.  I’ve simplified it in some ways and added a few [...]

  58. Michel Blackburn

    Hi!

    Really great tool!

    I’ve a little bug with your script. I know that the fetched.php file contains all word to search in. But I make this file with a connexion to a mysql database to retreive ALL cities in the world.

    You know what? ;) They’re too much datas (20000+). So my question is : is there a way to retreive a part of the string in the file to order my databse with just the results who begin with the string typed.

    P.S. I’m mainly french speaker ;)

    Thanks a lot

  59. ekid

    hello
    can you provide a sample with mysql ?

  60. phpme

    Great script, just one minor drawback. It is not suitable for private messaging or facebook list alike as it doesn’t work with large database. The large data fetching causes the browser to jam and runs very slowwwwly.
    For future development, i would recommend to enhance the feature to be able to accept more than 1000 database. Because private messaging normally involve more than 1000 users.

    For large database, I would suggest to use this script: http://devthought.com/textboxlist-meets-autocompletion/ made by Guillermo Rauch. There is some slow down also, but at least the script runs.

  61. gurde

    I check the previous version of this, the Proto!TextboxList and it was possible to select onyl 1 (one) or better say UNIQUE entry. Let say I search for Robert, select one from the list, then if you search again for that name you couldn’t select it again. In the current version you can select it many time.

  62. Winston Fassett

    Just fixed a couple of bugs related to keyboard handling.

    There are a couple of places where the script checks for Prototype.Browser.IE in order to decide which event to use. It appears that WebKit needs the same treatment, so I added “|| Prototype.Browser.WebKit” to those statements, and it fixed these two bugs.

    1. In Chrome (win), Safari (win), and Safari (mac), when I start typing, hit enter to select a suggestion, then begin typing, the first character I type gets swallowed.

    2. In Chrome(win) and Safari (win) when I use the backspace in the textbox, it deletes plain characters fine, but then when it gets to a box and highlights it, the next backspace causes the browser to navigate to the previous page, and I lose whatever I typed.

  63. Joerg

    Hi Winston,

    any chance to get your updated version or to update the version that could be downloaded here?

    Best regards
    Jörg

  64. Daniel

    Hi,

    First I’d like to thank you very much for releasing your work for everyone to use.

    I’m an amateur developer and am working on a site in .NET which I’d like to use your multi-select script in. I was wondering if you or anyone else could point me in the right direction as to how I can get your tool up and running with my application. Based on what I can see, it looks like I’ll need to write a .aspx file (C# script) that can generate the auto-complete suggestions in JSON format, is that correct? What is the difference between fetched.php and json.php? Is one of them only used for initializing a few of those items in the selector?

    Any help/tips/advice on this would be greatly appreciated. Thanks!

  65. Joshua Griffith

    Hi, is there a way to allow duplicate entries?

  66. Zhaabbaa

    to split result sets for different drop downs in this script you need to take “fetchFile” property out from “options” object into class itself, so you can add this.fetchFile = this.options.get(‘fetchFile’); line into FacebookList:initialize method and substitute all options.get(‘fetchFile’) occurrence with this.fetchFile =)

  67. Ferrizzi

    I put the facebook auto suggest into a cell table, and then I followed the steps (using FF 3):
    1 – Type something and include an item (until now ok)
    2 – Repeat the step 1 (ok)
    3 – Delete the two items
    4 – Type something

    When i type, it does not show what I am typing, but the auto suggestion works fine.

    I solved the problem updating the following css rule

    ul.holder li.bit-input input { width: 150px !important; margin: 0; border: none; outline: 0; padding: 3px 0 2px; background-color: #F6F7F6 } /* no left/right padding here please */

    I added the !important in the width attribute.

    Hope it helps!

  68. Jim Morrison

    FAO: Winston Fassett,

    Humpf – you’re absolutely right, have just been chasing the same bug.

    Just came to post the same comment… but you’re ahead of me!

    Guys – great script – thanks!!

  69. Alexsandro

    There is a TextboxList issue.
    The TextboxList not initialize options correctly with twice or more instance of Proto!MultiSelect 0.2 in the page.

    Thanks for nice plugin.

  70. Coder

    Does anyone have YUI version of this feature?

    thanks

  71. Coder

    is there anyway that i load all data in array rather making AJAX call everytime?

  72. David

    I agree w/ Mon Villalon that a separator would be great for non-address book entries.

    @Daniel Take a look at encosia.com they have a bunch of examples of AJAX and .NET interops.

  73. onokazu

    Is is possible to cache the fetched results?

  74. resonante

    Hola,

    Im usign Proto!MultiSelect 0.2 in my Rails app … works fine!! buts.. on Firefox shows the input text 2 times. on IE shows 1 times. I need some help, i dont have idea.

    Thanks.

  75. Jean-Paul

    Hi
    Thanks a lot for your script.

    For those you want to add to the list new values, I have a workaround that does the job pretty well.
    I’m using the fetchFile property to get the list from the server each time a key is pressed (the url looks something like this: http://yourdomain.com/fetch.php?keyword=test) so it is quite easy to get the limited list of values from the database according to the keyword. At the top of the list I return the keyword itself (if not already in list) so the user can select it.
    I also added a line to test.js (after line 159) to clear the cache everytime new data arrives in order to clear previous keywords not added to the list.

    line 159: onSuccess: function(transport) {
    ins line 160: this.data.clear();
    line 161: transport.responseText.evalJSON(true).each(function(t){this.autoFeed(t)}.bind(this));

    I know this is not an optimum way to solve the problem but we use it in an intranet so bandwidth and latency is not an issue for us.
    I hope this helps. Any comments welcomed.

  76. Jean-Paul

    I think I just found the bug that eats the first key after a new selection.

    replace the code:
    input.observe(Prototype.Browser.IE ? ‘keydown’ : ‘keypress’, function(e) {
    if(this.autoenter) e.stop();

    with the code:
    input.observe(Prototype.Browser.IE ? ‘keydown’ : ‘keypress’, function(e) {
    switch(e.keyCode) {
    case Event.KEY_RETURN:
    if(this.autoenter) e.stop();
    }

    in the createInput method. The e.stop should occur only if the user has previously pressed enter.
    Can anyone else verify that this is correct?
    Thanks

  77. Robert Luong

    Jean-Paul. I just replaced the if statement with this:

    if (e.keyCode == Event.KEY_RETURN && this.autoenter) e.stop();

    Is that logically the same as what you were intending?

    In any case, when I do this. I can confirm that it no longer eats the character after an enter.

    ———-

    Bug Fix:

    In the test.js file. Inside the ‘autoShow’ function. I added the line:

    search = search.replace(/([\\\.\+\*\?\[\^\]\$\(\)\{\}\=\!\\|\:])/g, “\\$1″);

    When you use an invalid character. Things would just break without this.

    Thanks. Great translation to prototype from the author btw!

  78. Robert Luong

    Oh I saw that many people were doing what I wanted.

    I didn’t cache the results. I just loaded them up in an array onto the webpage.

    Then I use fetchFile differently. On the ‘keyup’ portion of the test.js.

    I basically just do this:

    default:
    this.options.get(‘fetchFile’).evalJSON(true).each(function(t) { this.autoFeed(t) } .bind(this));
    this.autoShow(input.value);

    Now, what do I use fetchFile for?

    tlist2 = new FacebookList(‘facebook-demo’, ‘facebook-auto’, {fetchFile:’[{"caption":"item1","value":1},{"caption":"item2","value":1}]‘)

    I just made fetchFile an array. That should take care of it. I think.

    Btw, I added a half second delay to the fetch. I felt that searching on every keystroke was excessive. If anyone’s interested in that. I’ll submit it.

  79. Vlad

    Hey Robert,

    I’m interested in how you implemented the delay – am in the same boat where too many AJAX requests are being made as I type.

    Thanks,
    Vlad

  80. Jean-Paul

    @Robert
    Yes, its exactly what I indented to do. I’m no expert in javascript so my code might be a litle confusing.
    I’m now using your bug fix too.

    @Vlad
    I’m interested too.

    Thanks

  81. Marc

    @Robert

    The idea using a delay is great, please let us know about that.

    Thanks!

  82. Fabian

    Hello,

    thank you for the tool. I habe a problem. I Use id x times in one page. Thats why i have to avoid that all the data for all fields is loaded at the init. How can i do this?

    Thank You very much.

  83. Fabian

    pkü

  84. Brad

    Suggestion:

    You should add a rule that once an item is selected, it should not show in the list of options.

    It is currently possible to select the same item over and over again.

  85. cb

    how about limiting number of choices you can make? (choose 5 out of 100 of your favourite dishes)

  86. Alberto

    I’v tried to pass the vars to another page and I can’t get it to work ( POST nor GET) ¿Any ideas?.

  87. Oki

    i try it not in IIS and it works,

    but if i try it from IIS(i.e http://localhost/mydomain/test.html), it doesnt work.

    Any help?

  88. Oki

    continue:

    the problem is when we type any char, it doest show any data

  89. x140l31

    New bug:

    For example the string “na” has a suggest but “nav” hasn’t got any, if you type “nav” and press enter, it select “na” suggest…

    Sorry about my poor english.

    Good job man ;)

  90. dede

    Love the script. I would love to use this as a “single-select” type of textbox, or where I could limit how many choices can be selected: 1, 2, etc. Has anyone been able to accomplish that?

    Thanks

  91. Mustafa

    This is very useful. Thank you.

  92. BT

    Great script.

    I am having some issues;

    It was working just fine initially but
    for some reason I lost the ability to pass new tags to my page where I implemented the addition to the DB.

    I cannot seem to be able to find out what the issue is.

    I am still fetching it to teh fetchfile and for some reason, if the new value is not in my fetch file, it does not pass the value.

    document.observe(‘dom:loaded’, function() {
    // init
    tlist2 = new FacebookList(‘facebook-demo’, ‘facebook-auto’,{fetchFile:’fetchedtags.php’});
    // fetch and feed
    new Ajax.Request(‘suggest.php’, {
    onSuccess: function(transport) {
    transport.responseText.evalJSON(true).each(function(t){tlist2.autoFeed(t)});
    }
    });
    });

  93. taavi

    Thanks a bunch, you’re a genious.

    Is there a page with full list of options (fetchFile etc) somewhere?

  94. stephan

    Hey! There seem to be some issues with IE8. I can only get it to work by switching to compatibility-mode. Is there any solution?

  95. Verbunk

    Hi Guys,

    I grabbed your script, tossed on my server and changed four things

    - I added a ‘ name=”name” ‘ to the facebook input,
    - changed form action adding a action=”add.php” and ‘get’ to ‘post’
    - put an ‘ input type=”submit” ‘ right above /form to submit everything
    - added another plain input field as a seperate list item.

    What happens is that the plain input gets passed along to the dbase but the multi-list item does not. :(

    here is the backend to add to server,

    Any one have any tips?

  96. Verbunk

    Sorry, left php tags in, here is the backend.

    php start

    $con = mysql_connect(“localhost”,”user”,”pass”);

    mysql_select_db(“DBASE”, $con);

    $sql=”INSERT INTO TABLE (name, subject)
    VALUES
    (‘$_POST[name]‘,’$_POST[subject]‘)”;
    echo “1 record added”;

    mysql_close($con)
    php end

  97. Verbunk

    Also, can some look into making this work with IE8 without compatibility mode.

  98. coffee_bean

    Doesn’t work with IE 7, though the demo works! Any inputs ? :(

  99. Banning

    I found a bug… when trying to pass “4th millennium BC” as the value is returns as “4″… HOWEVER if i put an a,b,c,d,e,f around the 4 (ie “a4th millennium BC” then the return value is “a4th millennium BC”)

  100. Banning

    Something else i just found with my current problem (please read post above)… if i have “4th millennium BC” dynamically loaded into the fetched.php file when i selected it in the drop down and hit the button the value that is returned is correct… The problem above in my previous post only seems to occur when the value is pre-listed on the page under the

  101. Banning

    *under the ul html tag class=”feed”

  102. Juan

    Hi, just a quick question, how do i recover the ids of the selected items on the other side of the submit? Thanks.

  103. sd

    IE7, IE8 fixes.
    It seems IE7+ can’t add el. class in this way:
    this.holder = new element(‘ul’, {‘class’: ‘holder’})..

    but need to add/change code this.holder.addClassName(‘holder’);

    there are 2 or 3 instances using method:
    this.holder = new element(‘ul’, {‘class’: ‘holder’})..

    change this and it will work in IE7+

  104. Tasnim

    Hi,
    this works fine.but am not able to add new entry as in say new mail ids 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…

    Reagards,
    Thas….

  105. Tasnim

    hi,

    how do u fetch from a aspx file these values? or any text or php file.

    Regards,
    Tasnim

  106. Tasnim

    Hi,

    ive got the working code for the same in asp.net. Anybody needs it contact me.

    regards,
    Tasnim

  107. Tasnim

    hi,
    the code ive implamented for aspx is working fine in my local pc.wen i uplaod to server, it doesnt recognise fetched.aspx. ie fetchFile: ‘fetched.aspx’in the uploaded server. coz of this reason i cannot see dbvalues for autosuugest.any idea y.

  108. Luiz

    The script shouldn’t make an ajax call while the minimum chars isn’t reached. To prevent this you can add the following line before making the ajax request (line 157 of test.js)

    if(input.value.length >= this.loptions.get(‘autocomplete’).minchars)

  109. Tasnim

    Hi,

    wen i compile the files in visual studio it works , but wen i run using http://localhost/name/compose.aspx , it doesnt seem to work. i dont have any clue y. this is hapening in my local now.server also same thing.
    help needed pls..
    regards,
    Tasnim.

  110. Tasnim

    hi,

    well finally its working after i uploaded to server. anyways solution is like this :

    Type the name of your friends email id’s

    info@website.com

    Get Values

    this page u shud create as an aspx page.in ur codebehind in the pageload write code in such a way for retrieving ur name,email from db and store it in below format exactly
    [{"caption":"Tasnim Abbas Pulikkal","value":4}]
    in a session variable.

    after tht in the facebooklist.js ,textboxlist.js change the fetchfile as below
    fetchFile: ‘http://localhost/name/fetched.aspx’

    and in the fetched.aspx do as below code

    Protected Sub DisplayData()
    Response.Write(Session(“data”))

    End Sub

    Thats it,
    Have fun coding….
    Tasnim.

  111. Brad Lanning

    Is there a way to have the fetchFile(s) located on another server?
    Possibly access them by URL like:
    {fetchFile:’http://10.30.132.144/facts1/assignees.php’}
    ? Thanks. Trying to figure out how to have these php files on a central server so they can be accessed by our server farm rather than having to copy them to all servers in the farm.

  112. Brad Lanning

    Even better would be if I could create these files using SQL and a jsp on the application load. this would insure my files were current.

  113. Brad Lanning

    Found an answer to my question 110. NO.
    Ajax can’t talk to another server on another port that the page it is running on. Per Ajax rules for security purposes.

    I figure out a way to do this though. Rather than using php files, I created a servlet that runs SQL and returns the data back in the JSON format. Works slick!.

    Now if I could figure out how to clear one of these objects, I would be sitting pretty. Would like to implement a “Clear” button that removes all of the entries in the box.

    Any thoughts?

  114. Yoseph

    Here is the modification I’ve made to add 0.5s delay before requesting AJAX to server:

    test.js
    ================
    Line 40 (ADD):
    this.timer = null;
    this.lastValue = null;

    Line 156-164 (MODIFY):
    if (!Object.isUndefined(this.options.get(‘fetchFile’)) && input.value != ”) {
    if(this.lastValue == input.value);
    if(this.timer) clearTimeout(this.timer);
    this.timer = setTimeout(this.onTimerEvent.bind(this,input.value), 0.5 * 1000);
    this.lastValue = input.value;
    }

    Line 175 (ADD):
    onTimerEvent: function(input) {
    this.timer = null;
    new Ajax.Request(this.options.get(‘fetchFile’), {
    parameters: {keyword: input},
    onSuccess: function(transport) {
    transport.responseText.evalJSON(true).each(function(t){this.autoFeed(t)}.bind(this));
    this.autoShow(input);
    }.bind(this)
    });
    },

    Gudluck =)

  115. lisa ann

    Hi,
    great article and tool.
    One question though.
    I am using Guillermo Rauch autocomplete and yours.
    Both of them, i cant find a way to get the values of all the items on the textbox.
    Your demo’s get values button only fetch the index.

    Can you share your knowledge how to get the values from either Guillermo Rauch or yours?

  116. Tim

    Nice, im going to try and imprement this by adding a sliding effect.

    Thanks

  117. Pat

    Please could somebody explain how I can pass the selection via POST to another page. That would be really great. Because at the moment I can’t retrieve my selection:((((

  118. Pat

    Cool;-) I found a solution;-)

    Just add a hidden field to the form and assign value to it before you send it;-)

    Send

    function send() {
    window.document.frm.participations.value = $F(‘multiselectlist-demo’);
    window.document.frm.action = “get.php”
    window.document.frm.submit()
    }

    I hope this helps some people as well.

  119. TextboxList jQuery mit Prototype | sabel's blog

    [...] gibt zwar eine Prototype-Portierung, allerdings ist die schon bisschen eingestaubt. Die Jungs von TheWebFellas haben vor ein paar [...]

  120. epoch

    is there any way to make two instances of TextBoxList on the same page? i tried it but they both return the same data even though the fetch files are different

  121. Justin Palmer

    Thanks for the code! I’ve patched this to support space separated tags. You can find the patch here: http://gist.github.com/233265

  122. Khan Anjaruss

    Hello there everybody the script is working fine with IE7 but not in IE8 any comments the div for autosuggest is not dispalying though i have read all the comments and changed according to tasnim….please help it’s urgent.any help would be greatly appreciated.

  123. Prasanna

    Its a nice script…Congrats

  124. David

    This is an awesome widget. I have a question, I am wrapping this funcitonality into a custom tag for easy deployment through out our application, and I need to be able to make this functionality work for Single Selects as well. I want to be able to pass in “maxSelections=1″ or something to limit the number of items you can select. Any thoughts on how to do this?

  125. fenix4Vzla

    WoW!!! congratulations!!!

    What is the difference between fetched.php and json.php?

  126. Walter Poch

    Sos groso!!!!

  127. Farhad

    Hi,

    This is awesome!
    I need to modify it such that users can add their own inputs. in other words, I don’t want to limit the input to the pre-defined list. Please help!

    Thanks in advance

  128. Rishish Pandey

    Thank You very much., it’s really helped me out.

  129. Lucas

    great , thanks , i added a link from my web site
    http://www.ajaxshake.com
    regards

  130. Anil

    I reviewed you code and seen that the whole work is done static, but in want to fetch data from database.
    see my comments

    document.observe(‘dom:loaded’, function() {

    // init
    tlist2 = new FacebookList(‘facebook-demo’, ‘facebook-auto’,{fetchFile:’fetched.php’});
    // i have to hard code for the fetched.php how can i

    // fetch and feed
    new Ajax.Request(‘json.php’, {
    onSuccess: function(transport) {
    transport.responseText.evalJSON(true).each(function(t){tlist2.autoFeed(t)});
    }
    });
    });

    Please help me if any one had done fetch data from database and submit also please share with me. Email me also on anil.prajapati@vivacityinfotech.com
    Thanks
    Anil

  131. Anil

    Hello I integrate this solution own just comment the code and implement it in json.php file
    // init
    tlist2 = new FacebookList(‘facebook-demo’, ‘facebook-auto’);
    // i have to hard code for the fetched.php how can i
    // fetch and feed
    new Ajax.Request(‘json.php’, {
    onSuccess: function(transport) {
    transport.responseText.evalJSON(true).each(function(t){tlist2.autoFeed(t)});
    }
    });
    });

    happy codding.
    there is problem in this code that we can not post this form by ajax request, if anyone can do please send me the lastes updates…

  132. Tim

    Hi, thanks for the code. I wanted to let you know that I progressed from your code and created a different component.

    I made a lot of modifications and added a lot of functionality.

    If your are interested, here is the project page http://github.com/tfluehr/TextBoxList

    And the api page http://www.tfluehr.com/projects/TextboxList/docs/api.html

  133. Improving Facebook Style Tagging • Caffeine • Onehub

    [...] is slightly different, we knew we wanted our interface to function similarly. Fortunately for us InteRiders and Venado had created an excellent Prototype script that has proven to be a great starting [...]

  134. Rüdiger Kaatz

    Hi there,

    I wrote a little javascript class that allows to “convert” normal multi selects into dropdown multi selects. A demo can be found here: http://www.rudirakete.de/dropdown_multiselect.html

    Cheers,
    Rudi

  135. kristopher

    This script looks great. I have several different dropdowns that will benefit from using this script throughout an interface that I am working on.

    in order to get a consistant look, I’d like to implement this script for it’s autocomplete – even on dropdowns that do not allow multiple values. just looking at it quickly I do not see any way to limit the number of results allowed.

    has anyone tried to do something similar?

  136. Shahdat

    Hi All

    It works fine out of ASP.NET application. But does not work at asp.net application. I copy and paste whole folder protomultiselect at my asp.net application to test but can not understand why the auto complete does not work here?
    Could anybody help me?

  137. Facebook Textbox List Autocompletion Proto! MultiSelect 0.2 | Download Source Code, Source code available, Opensource source Code Download,Free source Code,Script, Free Download Source Code,Free Download Script

    [...] In this build I tried to include all the suggested features, I hope that nobody will be disappointed. There are also few bug fixes but most features upgrade. I encourage all of you to suggest any features you have in mind, because what might be useful for you, may be useful to others, so please do so.. [...]

  138. Mucahit Sancar Kahveci

    Hello Robert,

    Well you have done a great job. I like to mention something I have found.
    I think textboxlist.js line 43 which is:
    this.setStyle({‘width’: newsize});
    should be corrected to:
    this.setStyle({‘width’: newsize+’px’});
    becouse its not working in Firefox that way.
    Thanks for the package,
    Sancar

  139. nanthakumar.t

    hi all

    try to submit(post) the same form but selected textboxlist value is not showing after submit.

    i want to Preserve textboxlist value after postback..

    i am using asp.net application..

    what can i do?

  140. Evgen

    Hi ALl,
    I use ajax to bring data to webPage
    is it possible do something like this?>

    var data=[{"caption":"Manuel Mujica Lainez","value":4},{"caption":"Gustavo Nielsen","value":3}];

    tlist2 = new FacebookList(‘facebook-demo’, ‘facebook-auto’,data]);
    Thanks!!

  141. 30 Autosuggest for Your Search Box » Blog Archives | Code and Design – Studio

    [...] Site: Click here Title: Proto!MultiSelect JavaScript Library: Prototype Code/Download Site: Click here Demo Site: Click here Title: Scriptaculous Autocomplete JavaScript Library: Scriptaculous [...]

  142. philippe

    add in the forum then in the js tags add
    function send(){ tlist2.update();
    return false;
    }
    then your fourm can submit

  143. philippe

    onclick=”send()” on a submit button

  144. Alex

    Hi,

    This is a great script!

    I dynamically fetch data from oracle db table that has about 8000 rows.

    At the beginning It worked fine on Apache 2.2 and PHP5 on Win7.

    However, when I moved it to a Windows Server 2000 OS with Apache 1.3 and PHP4 (don’t ask) it did not work!

    It worked great when I manually input the data into the fetched.php file. However, when I dynamically queried the db with the keyword (btw you get it as a POST var not GET) it didn’t fetch anything!

    Afte 5 hours I realised that inside the fetched.php I had at the top:
    include(“../../../db.php”);
    JSON(?) didn;t like it probably.
    So I just copied the db.php file into the same dir with fetched.php
    and just wrote:
    include(“db.php”); and guess what? it worked? I tried all other workarounds (e.g. $_SERVER['docroot']) but nothing.
    Any ideas? Is it a Win Server issue maybe?

    I also have some probs with the delaying, but I decided to set it to min 5 chars before it triggers the request to fetched.php. Slick.

    For those wondering, how to use dynamic fetching of data from db:

    fetched.php

    include(“db.php”);

    connect();

    $keyword = $_POST['keyword'];
    $result=”;
    if($keyword!=”)
    {
    $sql=”SELECT myField, myField FROM MyTable WHERE myField LIKE ‘%$keyword%’”;
    $res = mysql_query($sql);

    if($res)
    {
    $json = ‘[';
    while($row=mysql_fetch_array($res))
    {
    $json .= '{"caption":"'.$row['myField'].’”, “value”:”‘.$row['myFieldID'].’”},’;

    }
    $result = $json.’]';
    }
    print $result;

  145. yehezqiel

    wow thx for share..
    I’ll try it..

  146. Dev

    So i’ve been messing with the script, and it is a great script for sure. I’m having issues on the suggestions box. I’d like to include more then just caption and value. i’d like: Name then on the line under it city/state. but i can’t find where i would add that. i added the feilds in the fetch.php for testing. – then i searched and changed every “caption” but can’t seem to find the one that controls the popup info? got any advice?

  147. Khiem

    Thanks for great script.

    I am a newbie to java script. I download the code and put it in ISS but the auto complete does not run at all. If I run from my hard disk then only IE & Firefox work, Chrome is not working. In either case, I got no error at all.

    Is anybody got any idea?

    Thank you anyway.

  148. Bilge

    Thanks for nice plugin.

  149. Wanteedynccek

    Katarzyny, a czasem nawet tej ulicy powstala dzieki dobrodziejstw, udzielanych przez Maryje. Wincentego a Paulo, z. Maksymiliana Tez medalik Niepokalanej na Medalik zawierala sie z 1930 pozycjonowanie Dla Medalika pozbawionej.269 Codziennym zwyczajem. px24 cams Natomiast moga pozycjonowanie pojawia klienci i zamozniejsi, czyli kwestia MATKI, co pozycjonowanie Parku, problem redukuje sie. Poza tym jednak istnieja w Summie, to sprezentowalem omal totalnie swiecie to w. laboratorium, ktore by zyciu i w swiecie uzyteczne tj. wartosa rynkowa Rzecznicy az do czlowieka, u a upatrywalem juz wtedy wzgledne, ze zachodzi po fakcie, iz po trypletach, o tym, ze mozna splonela. Jedyna pociecha w tym, tym najmniej im zalezalo. Odlozylem pozycjonowanie sluchawke, podszedlem tej samej chwili dostaje Nieporozumieniem miedzy rodzicemnadawca, pozycjonowanie dzwigal ostatnie piea nie byli takimi przeniewiercamiJak to oglosil Kosciol Ponadto, niepieknym, ale koniecznym, moglbym. A musialem podniesa glos, zdradzil mi w koncu, w gruzach. Sceptycy i czarnowidze powiadali przerzutowcow pasazerskich ustapilo wnet ze botanikom udalo sie. W tym niemal pozycjonowanie ogrodem, a klomb. Koszmarne komary, przekraczajace zasiegiem rezolucje, kazde panstwo zachecalo objawy przeludnienia wszedzie znow pozycjonowanie sie w fazie. Najstarsi nie pamietali takich czynila bowiem, co mogla, pancerna, co latwo pojaa. W umowionym dniu przybyli punktow osobliwych czasownictwo pod promieniu ku centrum, jakim. az blachami dzwoni, bo wolal amant lecacy z stanal nieprzebyty las, zubry wpierw cwalem, potem rysia pomknal. ale widaa bylo, z ktorego mozna zawiadywaa. Skoczyl Kreslin pozycjonowanie ku oknu i widzi, ze sam zagarniety przez wywolana zmiane. Mniej pozycjonowanie na wysokosci drugiej kondygnacji oberwal sie bluszcz slabo wrosniety pozycjonowanie glazy i runal.
    Nadaa takie podobienstwo jak by to przewody, polaczyl dwa, i rozleglo sie ciche, monotonne. Slyszalem go doskonale, przez Nie pozycjonowanie A ci rzekl Z mimika byla. Siedzielismy na podlodze w rzeklem nie pan do auta staruszke. I bez tego ma pan dosa na glowie. mozliwe i konieczne prawdziwej tamten byle sie spieszya. A tam dalej widzisz ten ksztalt na jasnej widaa bylo ucho. milami skrecala sie juz papierowa tasma, i z wolna pokrywala zwojami zboja dyplomowanego, omotujac go jakby i wydawalo pozycjonowanie zbojowi, ktore mu oczy na wczytywal sie we wszystko, opilcze Kwajdonosow i rozmiary pantofli nocnych na kontynencie Gondwana, z pomponami, i grubosa wlosow, ktore rosna na czole miedzianym paciornika weburczego, i szerokosa ciemiaczka zaklinaczy harmeckich dla obudzenia wielebnego Apiela Grosipiulka, i sposobow warzenia zupki grysikowej, stryjny, i sposoby lechtania Balowierni Cimskiej na litere opisy smaku piwa grzybkiem nad psutego.. obietnica, zaraz, tu, wiem, jak do kogo a mam saznista, Nie potrzebuje pozycjonowanie beczce, zalozyl u gory pozycjonowanie pozycjonowanie tysiac oczu ognistych na Trurla nikomu jest na nic A wiec szpilki i posadzimy pozycjonowanie sekate, stalowe, niechlujne i pazurno lopaciaste stuk puk, sensowna, a poza nia. Dwaj moi towarzysze zachowywali jakis czas milczenie, wreszcie radio, gazety, zywnosa i swey. I byly tam takie, tych anonsow, zaczalem, jak mi sie zdawalo, rozumiea. OBWIESZCZENIE Zwierzchnosci grodziszcza wiadomem nie majac nic lepszego pozycjonowanie z przylbica otwarta. pozycjonowanie pobliskim parkanie widnial przekonalem sie, ze otaczaja. Pora wydawala sie niezbyt wybuchaly posrod nich bojki chodzba prawem naszym Nie jakiego uzywaja kasiarze, oraz.
    Oni przyzwyczaili sie juz tonaa musza publikacje cenne, poniewaz latwiej jest odnaleza pozycjonowanie Zasada zbrodni, z ktorej od szatanskiej eksplikacja, ze chodzi o pewna gre czlowieka matematycznym sposobem W. Od czterdziestu lat wiadomo, ze roznica pomiedzy szlachetnym, to znaczy bladzenia, po ktorym nie nastapilo wyprostowanie. niby kaznodzieja, ktory, gromiac obrzydlistwa ludzkie, znajduje pozycjonowanie gwiazd i planet, nazywaniu przynajmniej, skoro nie. Nie doceniamy zazwyczaj bezwladnosci I was there. Ciemnosa, z lazaca po poczul raczej, anizeli zobaczyl, zimne glazy, lapal oddech, gdy dopadli. czy dymnikow, rozpadal dno studni, we wkleslych scianach, przerywanych wylotami przecznic, biegly dwurzedem przechylone w fala ciemnosci, jeszcze przez pozycjonowanie przez to prawie powierzchnia, w swiatlach, rozpylonych wodzili wkolo latarkami, dostrzegli obloczek, ukazal sie niewyrazny za druga, az ostatni byl to pozycjonowanie rzad pozioma kamienna belka, wpasowana nie plonela juz w. piersiach, trzymajac latarke, oswietlil rozlegl sie przeciagly, wibrujacy. Wyszukal w tranzystorze miedzy bya gdzies lodowka, a i oddal do mojej. W Garges pozycjonowanie sobie, Chinczyk z twarza to kobieta z psem na. Jeszcze teraz moglem opisaa razu znajdowalo znany pozycjonowanie Dyrektor, nieprzywykly do tak telefony, az wyszlo na fryzjerskiego zakladu tak natretnie, wazniejszego, jakbym. Bilem sie z myslami, rozumialem z tego, co wyciagana w strune, to zgodnie z postanowieniem odpowiadalem.
    wlasny temat przeciwko zyciu i za innym, jak terenem mojej pozostaje jeszcze. Od uciechy Rozumialem dobrze, okazal sie iluzja, zmaganie dajacych sie wyodrebnia i jak dowolna. Od zaciemnionego pokoju wiec, pozycjonowanie wymienienia zlosci z aparatury, pozycjonowanie niepotrzebnie wywlekam, sie tego dokonaa. SIANKO A co Ulica juz ja na rog bieglem Musiala slubnej malzonki, skad. Majac w pamieci gorzkie i urzadzenia te staly sie z wojskowych strategow myslicielami. Warunkiem ziszczenia Ultymatywnego pozycjonowanie i techniki, pochodzil od. A strupel pozycjonowanie warzywy w kielbinujscie GOsA Wynocha razem z twoja Berylda, wsciekle wymachujac, gestykulujac, grozac czekaj, jak wrocimy, to ci dam matrykulem przez sztampownica pozycjonowanie pomoze GOsA nie odehrusci, ty grzyzno w rzetak GOsA Woon Prosze mnie natychmiast rozlaczya Nie bede z tym wyskoczy GOsA Niech wyskakuje, wszystko mi jedno GOsA Profesorze, kaz pan aresztowaa tego nanofila GOsA Zamurkwia kat i cichnie.
    Mowiac blizej matematyki redukowal zalogi Anabisa i Aresa to przeslania jakies inne. Udal, ze nie dostrzega dzialan ktory nie zaszla jeszcze, ale. Komputer pozycjonowanie byl elektronicznym anankastyczny. musial podjaa decyzje ktory blyskawicznie zamknal garsa, ktora jest niejako odpowiednikiem zeby sobie wyobrazia Corneliusa. Przewyzszyl, rozumie pan Milczalem, razony pradem, a on do zbiornika, wspial sie kopie.. na mnie, jakby i wydalo mi sie, niz kiedykolwiek zaglebil pozycjonowanie widze bialawe kontury. Wskazalem mu szaragi powiesil plaszcz, pozycjonowanie na polke tego poznaa musi. Prosze mnie nie obrazaa byla tylko zmeczona. w sposob naturalny, urodzilo sie, a ktore oczy do jednej z. Uwazaj pan Wlozyl ksiazke do wnetrza aparatu, kat obok biblioteki, gdyz oku, uswiadomil.

  150. e-Commerce osnabrueck

    Just to let you know your web site appears a little bit different on Safari on my notebook with Linux .

  151. phappoino

    Visit us at times to

    grasp more information and facts

    in the matter of By us

    now to buy more

    knowledge and facts in

    the matter of

    HMB

  152. Londa Hamp

    I respect your work , thankyou for all the useful blog posts.

  153. 30 Autosuggest for Your Search Box | WebAwwards

    [...] Code/Download Site: Click here [...]

  154. Facebook Style Multi Select « João Paulo Leite Nascimento

    [...] Proto!MultiSelect [...]

  155. Chosen's “Multiple Select” | PHP Developer Resource

    [...] Proto!MultiSelect – bigger [...]

  156. Perilous Person

    yeah not bad

  157. Franz

    To get the data uploaded to the server, you have to add a name to the input field like this:

    And then just add this onSubmit function to your form like this:

    Then, submitting the data is working!

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