Proto!MultiSelect 0.2
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
Download
Posted in Prototype/JavaScript/Ajax
February 18th, 2008 at 6:49 pm
[...] New version is out, check it out! [...]
February 19th, 2008 at 5:26 am
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
February 19th, 2008 at 6:58 am
Great update, really excited about this tool.
February 19th, 2008 at 9:07 am
Dear Antoine, Thank you for suggesting the error, it has been fixed, please grab the latest file.
February 19th, 2008 at 7:35 pm
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..
February 20th, 2008 at 4:23 am
@Mon Villalon: I agree, that would be a great feature!
February 20th, 2008 at 5:05 am
[...] 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… [...]
February 20th, 2008 at 5:41 am
Any support for ColdFusion in the future?
February 20th, 2008 at 8:36 am
@Mon Villalon
Thanks, that would definitely be worth implementing in the next build.
February 22nd, 2008 at 4:10 pm
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
February 26th, 2008 at 8:43 am
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?
February 27th, 2008 at 7:31 am
Can I use 2 Proto!MultiSelect inputs on 1 html page with different json fetchfiles? When I try, both inputs use the same fetchfile…
February 27th, 2008 at 8:02 pm
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…
February 29th, 2008 at 9:05 am
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
March 7th, 2008 at 2:10 pm
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!
March 14th, 2008 at 5:54 am
Great script, i was wondering how to make it working well with utf-8 encoding. I’m having issues with accents and stuff.
March 21st, 2008 at 7:00 am
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!
March 23rd, 2008 at 6:51 pm
[...] from database Ajax Auto Suggest v.2 Facebook List TextboxList with AutoCompletion Proto!MultiSelect 0.2 TextboxList meets [...]
March 24th, 2008 at 5:46 am
how do you submit this form ?
March 26th, 2008 at 9:17 pm
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?
March 28th, 2008 at 8:21 am
Just wanted to say thanks, this is a great little tool that I will be using in my next project.
April 2nd, 2008 at 10:03 pm
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,
April 9th, 2008 at 10:27 pm
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?
April 14th, 2008 at 1:49 am
Can this work in IE 7? It doesnt work in mine but it works in Firefox
April 14th, 2008 at 7:12 pm
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
April 15th, 2008 at 10:04 pm
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
April 28th, 2008 at 10:54 pm
Hey EGBlue
Having a hard time getting your email address. Drop us a line. Thanks.
May 12th, 2008 at 3:25 pm
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)
May 16th, 2008 at 2:30 am
[...] Proto!MultiSelect 0.2 | InteRiders (tags: autocomplete javascript prototype) [...]
May 20th, 2008 at 5:16 am
Hi,
Is there a way to get the data from a mysql database, instead of a php file ?
Thank You
May 20th, 2008 at 6:53 am
Friedman, just have the .php get the data from a mysql database and print it.
May 20th, 2008 at 11:21 am
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!
May 29th, 2008 at 4:04 pm
Are there any docs for this product?
I am struggling with passing my input through to a php script for an sql query.
Thanks!
June 4th, 2008 at 4:36 am
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…
June 11th, 2008 at 4:05 am
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
June 22nd, 2008 at 6:27 pm
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.
July 12th, 2008 at 7:50 am
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…
July 31st, 2008 at 5:08 am
This is awsome stuff…but am not able to add new entry(i mean new text) in the text box…i can add only the suggested text..so can u pls tel me that how to add new entry in the textbox when we press enter or comma…
thanx a lot..
July 31st, 2008 at 9:53 pm
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
August 5th, 2008 at 12:48 am
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
August 5th, 2008 at 5:17 am
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?
August 9th, 2008 at 1:30 am
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
August 13th, 2008 at 12:28 pm
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!
August 14th, 2008 at 2:09 am
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.
August 17th, 2008 at 11:18 pm
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
August 18th, 2008 at 6:35 pm
Hi
You should put this code some where we can all contribute. Github, google code… somewhere like that would be cool. Great work!
-Todd
August 18th, 2008 at 11:33 pm
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…
August 22nd, 2008 at 5:31 am
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…
August 27th, 2008 at 3:07 am
[...] that I saw Proto!Multiselect here. I really liked and decided to port this solution to Jquery. The result you can see in demo [...]