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

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

    Thanks a bunch, you’re a genious.

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

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

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

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

  96. Verbunk

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

  97. coffee_bean

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

  98. 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”)

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

  100. Banning

    *under the ul html tag class=”feed”

  101. Juan

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

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

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

  104. Tasnim

    hi,

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

    Regards,
    Tasnim

  105. Tasnim

    Hi,

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

    regards,
    Tasnim

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

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

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

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

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

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

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

  113. 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 =)

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

  115. Tim

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

    Thanks

  116. 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:((((

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

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

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

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

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

  122. Prasanna

    Its a nice script…Congrats

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

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