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 [...]
September 5th, 2008 at 2:00 am
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
September 8th, 2008 at 7:07 am
Thanks!!!!
From Colombia, Thank You very much =)
September 10th, 2008 at 5:50 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!
September 15th, 2008 at 3:50 pm
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);
———————-
September 16th, 2008 at 7:51 am
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?
September 25th, 2008 at 4:54 am
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
October 13th, 2008 at 2:00 am
Hi, the script doesn’t work in IE7, but does work in Firefox… How comes?
would love any feedback.
October 20th, 2008 at 5:58 pm
[...] this prototype port, it’s not a line-by-line port. I’ve simplified it in some ways and added a few [...]
October 21st, 2008 at 1:10 pm
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
October 24th, 2008 at 2:41 am
hello
can you provide a sample with mysql ?
October 28th, 2008 at 11:19 pm
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.
November 25th, 2008 at 7:11 am
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.
November 25th, 2008 at 2:46 pm
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.
November 27th, 2008 at 6:06 am
Hi Winston,
any chance to get your updated version or to update the version that could be downloaded here?
Best regards
Jörg
November 29th, 2008 at 1:36 am
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!
December 1st, 2008 at 1:51 am
Hi, is there a way to allow duplicate entries?
December 6th, 2008 at 6:37 pm
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 =)
December 18th, 2008 at 9:32 am
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!
December 18th, 2008 at 10:51 am
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!!
December 23rd, 2008 at 11:09 am
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.
December 24th, 2008 at 6:42 am
Does anyone have YUI version of this feature?
thanks
December 24th, 2008 at 7:15 am
is there anyway that i load all data in array rather making AJAX call everytime?
January 16th, 2009 at 6:21 am
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.
January 24th, 2009 at 9:58 pm
Is is possible to cache the fetched results?
January 27th, 2009 at 6:33 am
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.
January 28th, 2009 at 10:05 am
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.
January 30th, 2009 at 6:41 am
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
January 30th, 2009 at 9:18 am
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!
January 30th, 2009 at 10:21 am
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.
February 1st, 2009 at 2:52 pm
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
February 2nd, 2009 at 6:03 am
@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
February 5th, 2009 at 7:48 am
@Robert
The idea using a delay is great, please let us know about that.
Thanks!
February 6th, 2009 at 3:09 am
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.
February 6th, 2009 at 3:10 am
pkü
February 9th, 2009 at 12:15 pm
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.
February 10th, 2009 at 5:26 am
how about limiting number of choices you can make? (choose 5 out of 100 of your favourite dishes)
February 11th, 2009 at 3:17 pm
I’v tried to pass the vars to another page and I can’t get it to work ( POST nor GET) ¿Any ideas?.
February 18th, 2009 at 1:29 am
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?
February 18th, 2009 at 1:31 am
continue:
the problem is when we type any char, it doest show any data
February 21st, 2009 at 5:41 pm
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
February 26th, 2009 at 10:45 am
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
February 28th, 2009 at 10:46 am
This is very useful. Thank you.
March 10th, 2009 at 12:35 pm
Thanks a bunch, you’re a genious.
Is there a page with full list of options (fetchFile etc) somewhere?
March 27th, 2009 at 11:15 am
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?
March 30th, 2009 at 7:46 pm
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?
March 30th, 2009 at 7:47 pm
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
April 1st, 2009 at 8:28 pm
Also, can some look into making this work with IE8 without compatibility mode.
May 7th, 2009 at 11:07 pm
Doesn’t work with IE 7, though the demo works! Any inputs ?
May 11th, 2009 at 7:35 am
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”)
May 11th, 2009 at 8:06 am
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
May 11th, 2009 at 8:06 am
*under the ul html tag class=”feed”
May 25th, 2009 at 2:57 pm
Hi, just a quick question, how do i recover the ids of the selected items on the other side of the submit? Thanks.
June 7th, 2009 at 11:10 am
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+
June 8th, 2009 at 2:18 am
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….
June 8th, 2009 at 3:01 am
hi,
how do u fetch from a aspx file these values? or any text or php file.
Regards,
Tasnim
June 8th, 2009 at 7:17 am
Hi,
ive got the working code for the same in asp.net. Anybody needs it contact me.
regards,
Tasnim
June 8th, 2009 at 2:21 pm
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.
June 8th, 2009 at 2:29 pm
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)
June 9th, 2009 at 5:58 am
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.
June 9th, 2009 at 7:02 am
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.
June 17th, 2009 at 3:11 pm
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.
June 22nd, 2009 at 7:58 am
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.
June 24th, 2009 at 3:25 pm
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?
June 30th, 2009 at 7:47 am
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 =)
July 2nd, 2009 at 10:00 am
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?
August 5th, 2009 at 2:14 am
Nice, im going to try and imprement this by adding a sliding effect.
Thanks
October 1st, 2009 at 2:16 am
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:((((
October 1st, 2009 at 3:45 am
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.
October 10th, 2009 at 3:29 pm
[...] gibt zwar eine Prototype-Portierung, allerdings ist die schon bisschen eingestaubt. Die Jungs von TheWebFellas haben vor ein paar [...]
October 12th, 2009 at 5:05 am
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
November 12th, 2009 at 12:49 pm
Thanks for the code! I’ve patched this to support space separated tags. You can find the patch here: http://gist.github.com/233265
December 1st, 2009 at 11:58 pm
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.
January 19th, 2010 at 10:41 pm
Its a nice script…Congrats
February 6th, 2010 at 2:05 pm
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?