Autocompletion with Scriptaculous and Ajax.
Ajax, Scriptaculous, User Interface, Web Development Add commentsThis tutorial supercedes my previous turtorial on autocompletion by adding further tips and tricks to make your autocompletion a much better experience for your site users The tutorial is structured in the following way:
- Introduction: What is autocompletion and why use it?
- How it works.
- Getting scriptaculous and building the form.
- Building the autocomplete server.
- Passing back an id to our form.
1. What is autocompletion and why use it?
I predict that most people will want to skip this section and get straight to the action, so I will keep it brief. Autocompletion is a means of helping your users when filling in forms. The most common application of autocomplete is found in your web browser’s address bar; as you type the bar makes suggestions of URLs based on previous pages visited. In our example we will query a database of musical artists and give our users suggestions as they type in an artist name field.
2. How it works.
As a user types in a specific input field on a form, on each key up event, we use JavaScript to call a script in the background using Ajax (XMLHttpRequest) features built into the Scriptaculous library. Our form will pass the currently typed text to this script and the script will return a list of suggestions which will be dynamically placed in our page. The important thing is that our user can select one of these items by mouse-click or key-stroke to populate the form field instantly.
3. Getting scriptaculous and building the form.
This implementation of autocomplete requires 3 components:
- The Scriptculous libraries;
- An HTML form with a single field;
- An autocomplete server script
I use PHP as my language of choice for the autocomplete server script, but I have tried to keep this tutorial abstract enough to allow you to use your language of choice. The server script is the only thing that changes for different server-side scripting languages. Download the latest version of the Scriptaculous JavaScript Libraries and include them in the head of a new HTML document as below. Don’t forget to change the paths to match your directory structure:
<script type="text/javascript" src="lib/prototype.js"></script>
<script type="text/javascript" src="src/scriptaculous.js"></script>
Now add a form to your HTML page’s body. In this form we are going to add a field that will take our search term (with both id and name attributes as “searchterm”) and an empty div with an id of “hint”. This empty div acts as a holder for our hints when they are generated. You should have some HTML looking like this:
<input type="text" name="searchterm" id="searchterm" />
<div id="hint"></div>
All we need now is to initiate a new call to Scriptaculous’ built in Ajax.Autocomplete method below our HTML code for the autocompleter - like this:
<script type="text/javascript">
new Ajax.Autocompleter(”searchterm”,”hint”,”server.php”);
</script>
The Ajax.Autocompleter takes 3 arguments: The element supplying the search string, the element to show suggestions in and the server script that will generate our suggestions. With that in place we can write the server script.
4. Building the autocomplete server.
The following server is written in PHP connecting to a MySQL database but you can your language of choice and even a flat text file or XML file for the suggestion database. My database table, “Artists”, is simple - it comprises a unique id field and an artist “name”.
As the Autocompleter sends the value of a form field as a POST variable, we can use this in our server script’s query againstthe database. All we need to do is output an unordered list for the autocompleter. Scriptaculous does the leg work of inserting the latest list into our hint box everytime the user makes a keystroke. Here is my server code in PHP
<?
// don't forget your database connection here.
echo "<ul>";
$sql = "SELECT * FROM artists WHERE name LIKE '%" . $_POST['searchterm'] . "%'";
$rs = mysql_query($sql);
while($data = mysql_fetch_assoc($rs)) {
echo "<li id=\"" . $data['id'] . "\">" . $data['name'] . "</li>";
}
echo "</ul>";
?>
Note that I have given each list item an id that is the same as that of the record. We will use this shortly for a more advanced technique. But for now we have all we need for a basic autocompleter.
5. Passing back an id to our form
Once a user has selected an item from the autocompleter, the string is entered into the textfield. Often, for the sake of efficiency and accuracy it is better to deal with the id of the item than the string name when it is passed on to the next page. To do this we can use some extra functionality of Ajax.Autocompleter along with some JavaScript that will pass the id to a hidden field in our form.
The first thing we need to add to our form is a hidden field with an id that we can reference:
<input type="hidden" id="artist_id" name="artist_id" />
Now we can use an extra piece of functionality built into Ajax.Autocompleter that allows us to pick up the id that we included in our list item from the server script. This is an extra option on our autocompleter call:
new Ajax.Autocompleter(”searchterm”,”hint”,”server.php”, {afterUpdateElement : getSelectedId});
We are telling our autocompleter to run a function called getSelectedId when an item is selected. All we need to do now is write this function to get the id and inject it into our hidden field. Insert the function below the
function getSelectedId(text, li) {
$('searchterm').value=li.id;
}
And that’s all there is to it. Of course you can be as clever as you want with your autocomplete server script. Try using the LIMIT clause in your SQL to make it run faster. Make your queries more advanced to bring back more specific results. And don’t forget the fun you can have with CSS on your hint div and the list of suggestions that it displays. If you have any implementations of autocompletion using this tutorial, please post them in the comments here.
This post is sponsored by Gemstone and Silver Jewellery buy silver necklaces, pendants and bracelets online set with natural semi precious stones.
Identcommunications offer marketing and advertising services in Marbella on the Costa del Sol.
July 31st, 2006 at 5:11 pm
Remarkable “recipe” 5*! Thank you very much.
August 2nd, 2006 at 2:49 pm
wow! works perfectly.
Added to my del.icio.us.
Thank you
August 15th, 2006 at 5:35 pm
[…] After spending some time scouring the net for a simple tutorial for the ajax.autocomplete function within scriptaculous, I found that with the exception of Tim Roberts - Ajax autocompletion for the impatient, very little exists. […]
August 16th, 2006 at 6:11 pm
Hi, wonderfull example!
Can you post some example file, because I just can’t get it to work. I mean, I have done all that you have said and still doesn’t want it.
I just want to see what I have left behind, if any.
Thanks
August 16th, 2006 at 7:52 pm
Costi
At the top of the page you will now see that I have included links to example files and an online demo of them in action.
When I get some spare time I will also be posting a sequel to this tutorial exploring the autocomplete in more depth and a few experiments.
Tim
August 19th, 2006 at 10:16 pm
Tim,
Thanks for the tutorial - it is the only one out there currently.
I have a question, within the server.php script the information is being echoed. Where is it being echoed to?
I have installed your script to one of my servers (updating relevant info of course), but I have been unable to get it to work.
Many thanks!
Wayne
August 19th, 2006 at 11:23 pm
Hi Wayne,
The server.php creates an unordered list that is used by scriptaculous to populate the hints div in your page dynamically. I believe it does this with some innerHtml magic. server.php runs in the background, so the only time you see the output is when the front end is displaying it.
To check that your server.php file is working, change the $_POST variable to a $_GET, then you can try the script directly from your browser like this: server.php?search=the. This should output an unordered list , or any errors that PHP may be throwing up
Good luck, and if you need any more help, let me know.
August 20th, 2006 at 12:09 am
Interesting, with a direct link to /server.php using both $_POST and $_GET, the results are the same - the listing of the entire database. (as it should)
Found the solution - it was in the reference to the scripts. Changing “javascripts/” to “/javascripts/” did the trick.
Back to the simpliest of solutions - CHECKING THE PATHS OF INCLUDES!
And I thought it was some AJAX voodoo
Thanks!
August 29th, 2006 at 3:51 pm
Super!
Thanks for putting us on the right track
Question:
Let’s say I have a list of names and their adresses.
In the autocomplete-Search-field you can search/list names and by selecting a name you get the adress (detailed info). So there has to be some kind of ‘command’ to the browser.
I’m sure this is possible, but my attempts have not been succesfull
Thanks for any help in advance!
Cheers
QT
August 29th, 2006 at 10:02 pm
Hi QT,
Look into using the Ajax.Updater that is also a part of the scriptaculous libraries. The libraries you include in the above tutorial are sufficient to run the Ajax.Updater. More information can be found at:
http://wiki.script.aculo.us/scriptaculous/show/Ajax.Updater
You could post the selected value and run another background script and Ajax.Updater to dynamically renew the content in a div - i.e. the address details.
I will post a tutorial on using Updater towards the end of this week based on your scenario as it is a good example.
Good luck. Tim.
September 4th, 2006 at 5:08 pm
Thanks for this. I needed to find a very quick way to auto complete.
It works a treat, and I have it grabbing the data perfectly from a MySQL database. (incidentally, it grabs a Country name, and the corresponding yahoo country code to search the Yahoo RSS Weather feeds)
However, one question - is it possible to speed the process up, ie as soon as the user inputs one or two letters, the results are displayed, and as they type more, it updates the list?
So instead of typing a letter then waiting a few seconds, there is next to no wait at all?
You can see how it works by using the weather search. I changed it to only search by the first letters, instead of perfoming a wildcarded match. Try Par, or Rom, or Lon.
Thanks
September 4th, 2006 at 5:15 pm
Hi Wayne 2!
Unfortunately you are at the mercy of the server that you are contacting for your results, which in your case is remote. This script does work best on local servers, and the only way you could speed it up is by caching the locations say once every 24 hours and searching the local copy.
Tim
September 4th, 2006 at 7:14 pm
Ah, what i mean is that the autocomplete data is within the mysql database, which is on the local machine.
Does this make any difference?
September 5th, 2006 at 5:20 pm
Hi Tim
I tried the Ajax.Updater but somehow cannot manage to get the according ‘IDs’ out of the server.php-File.
The Wikis and Googles in the web didn’t have an answer as well
Hope you can come up with an example
Thanks a lot!
QT
September 21st, 2006 at 9:27 am
Hi Tim,
Your script is very useful and works fine.
Thanks.
Car
October 3rd, 2006 at 6:48 am
This is great code.
Can you guide me to modifying this so that pressing up and down highlight the current selection? Currently, up and down work fine, but I can’t see what I’m selecting since the selected choice is not highlighted. (And on the same note, there has to be a way to prevent the cursor in the textbox from moving when pressing up and down).
Also, from what “Wayne 2″ was asking, the actual query doesn’t seem to be executing until a certain amount of time passes. I would expect the query time to be minimal on a local sql server. There’s actually a timeout between queries and keystrokes (a good thing - to prevent tons of queries milliseconds apart bogging down a system).
In controls.js, you’ll see a variable for this.options.frequency . If I’m not mistaken, decreasing this will give you the results you’re looking for. It seems like you can set this parameter from the instantiation, but I’m a bit rusty in JS, and I am having trouble with the ebb and flow… if someone a bit more experienced could help me from here?
And again, Tim, mucho thanks for this code.
October 4th, 2006 at 12:54 pm
Hi TB,
Add this to your css classes:
ul li.selected {
background-color:#0000FF;
color:white;
width:100%;
}
noted from:
http://wiki.script.aculo.us/scriptaculous/show/Ajax.Autocompleter
Hope this helps
October 15th, 2006 at 10:04 pm
Hi,
Thank you for this excellent example
I couldn’t get my head around how to get the the mysql_result date from
mysql_query, plus your example doesn’t rely upon the getElementById(’elementID’) function that an example form a book did :(.
Thank you, Rob
October 15th, 2006 at 10:35 pm
Hi Rob,
As an intersting aside, when you include the prototype library as in this example, you have at your disposal a piece of excellent shorthand for getElementById:
$(’elementId’) is the equivalent of getElementById(’elementId’) when using the prototype library.
Much simpler.
Tim
November 7th, 2006 at 12:15 pm
Hi Tim,
Great sample!
Just one small question?
i have change code to display a list of clients that a company has.
It displays the clients name like clockwork (nice)
But i also need to get the clients id from the DB as well. is there a way to do this using LI?
So when a selection is made i get the clients name and DB ID is 2 fields.
i know that i could add the id to the name and strip is out at a later date but thats a bit of a hack.
thanks in advance
Chris
November 11th, 2006 at 3:27 am
[…] Autocompletition by Wiseguysonly [Home][Demo][Descargar] […]
November 13th, 2006 at 3:01 pm
Just like we have a
which gets populated with the auto-completion list, is there any way to have a which could be populated with the results of a query using the value when the user clicks on an entry or presses return/enter, hits tab while an entry is highlighted?
If yes, is there anything readymade like:
ew Ajax.Autocompleter(”",”",”");
If there isn’t a readymade call, do you have any custom call I could use?
November 22nd, 2006 at 10:39 pm
Hey this is great. It makes alot of sense and the easiest tutorial available to learn. But I have a smallest question.
When I search for a username in the search box, the username appears in the search box, now I want to press enter, and once pressed enter or go button, it should take the user to that searched populated username profile page. how can I do that?
any idea where I put the link to foward the user to that selected user profile?
thanks
November 23rd, 2006 at 2:29 am
Had it working in 5 minutes. Thanks!
December 16th, 2006 at 11:12 pm
How do I adjust the width of the box that pops up showing the suggestions? I have tried modifying the #hints selector, but no such luck…
anyone?
January 20th, 2007 at 6:35 pm
Thanks for this lovely script.
I’m using:
Can somebody help me figuring out how I can add a hidden input field with the ID only, so I can add the ID in a link table? The filter option I currently use is not entirely safe, and I don’t want the user to see “name [ID]” in the autocomplete list.
January 20th, 2007 at 7:17 pm
Found the solution @ http://wiki.script.aculo.us/scriptaculous/show/Ajax.Autocompleter
I use to add information without showing it.
January 20th, 2007 at 7:24 pm
it didn’t work, actually I’ve got the same problem as Chris (http://wiseguysonly.com/2006/04/14/ajax-autocompletion-for-the-impatient/#comment-171).
January 21st, 2007 at 12:15 am
Hi!
A very good guide how to do this, and I get everything working on simple sites, but the site that I want to use the method on doesnt work =/ Nothing happends when I type three letters in the search box. I have inserted other scriptaculous scripts (drag and drop for example) and it works fine. Is there anything you know about that might help me to find the problem? I dont really know how to figure out how to fix this (probably) silly problem.
Regards
/Herman
February 20th, 2007 at 10:08 am
Hallo Tim Roberts,
your code works very well, thank you …but:
if the central code of the autocomplete.php (search-form , the hint-div and the Ajax.Autocompleter-Call) ist firstly inserted with an other call of an ajaxUpdater, the Autocompleter dosen’t work anymore
March 5th, 2007 at 9:04 pm
Thank you very much! A pleasing implementation that is very easy to get working. A+
April 17th, 2007 at 2:40 pm
Hi there. Great tutorial! I’ve got mine 99% working now for numerous fields..
I am having one problem though. Ive not changed any of the JS code, and when i put in a term to search for, it gives me a list of all the entries, i can hover over these fine etc, but as soon as i click on it, it does nothing, just closes the list down.
On yours, and when i used your files and the exact same details as yours, the entry you click on, ends up in the textfield..
The only thing I can think is because i’m using postgresql instead of mysql..
Any ideas?
May 16th, 2007 at 12:48 pm
I have updated this script (by a very simple addition to the CSS) so that when users scroll the items with keyboard arrows the currently selected item is highlighted.
More here: http://wiseguysonly.com/2007/05/16/ajax-autocomplete-revisited-highlighting-the-selection/
May 16th, 2007 at 12:49 pm
[…] have been several linlks to this site claiming that my Ajax Autocomplete implementation requires the use of a mouse and is not accessible via the keyboard. This is not […]
May 21st, 2007 at 11:21 pm
Hi, great autocompleter, works like a charm!
Anyway, I was wondering though, is it possible to have multiple autocompleter fields on one screen? I have tried this by duplicating the search/hint fields, and calling them search2 and hint2, and of course also did the same for the new Ajax.autocompleter object. However I can’t get it to work.
Can you explain me how to do this?
Thanks in advance!
May 23rd, 2007 at 11:41 am
Alright, for Google’s sake, I’ve found a way to have multiple autocompleters:
You need to add another textfield with the same name, but different ID. You can still use the same hidden div for all the lists.
so you’ll have something like this:
new Ajax.Autocompleter(”search1″, “hint”, “server.php”)
new Ajax.Autocompleter(”search2″, “hint”, “server.php”)
You can of course make as many fields as you need.
June 23rd, 2007 at 11:05 pm
I couldn’t find this tip anywhere in the article/responses, but to speed up the display of your list use a LIMIT clause, e.g.
LIMIT 10 on the end of your sql query.
This only displays the top 10, but obviously updates the more they type, and speeds everything up in a large database.
June 24th, 2007 at 9:46 am
Can somebody translate the php code of : $sql = “SELECT title FROM autocomplete_demo WHERE title LIKE ‘%” . $_POST[’search’] . “%’”;
$rs = mysql_query($sql);
to Coldfusion?
Thanks,
Brian
June 28th, 2007 at 12:18 am
Im still pullling my hair off around the multiple felts autocompletion.
The sql statment is:
mysql_connect($host,$user,$password);
mysql_select_db($database);
$sql = “SELECT malartikkel, leverandorsnavn, kunde, epost FROM varebest WHERE malartikkel LIKE ‘%” . $_GET[’malartikkel’] . “%’” . ” AND leverandorsnavn LIKE ‘%” . $_GET[’leverandorsnavn’] . “%’” . ” AND kunde LIKE ‘%” . $_GET[’kunde’] . “%’” .” AND epost LIKE ‘%” . $_GET[’epost’] . “%’”;
$rs = mysql_query($sql);
?>
and the felts defined looks like:
Mal artikkel:
” />
new Ajax.Autocompleter(”malartikkel”,”hint1″,”server.php”);
Leverandørens navn:
” />
new Ajax.Autocompleter(”leverandorsnavn”,”hint2″,”server.php”);
Kunde:
” />
new Ajax.Autocompleter(”kunde”,”hint3″,”server.php”);
and the problem is that no matter what felt im in and no matter what i write i get all the values from all the columns in the felts..
can someone please help me
June 29th, 2007 at 9:01 am
Thank you very much for this great tutorial! - Now autocompleting works fine…
August 23rd, 2007 at 1:10 pm
You should sanity-check the data you are placing into your SQL query. If I put a single quote into the search box I get a nice MySQL error.
September 2nd, 2007 at 10:31 pm
I followed your turorial ans it’s excellent.
It works perfectly on your pages, but when I put it into my code, I cannot see the div where the results are. I just get the div with the results of the search, but with the display:none.
Do you have any suggestions why this code isnt working?
September 6th, 2007 at 7:50 am
Thanks for the article!
How do I change the index to 3? I want it to start searching after entering 3 characters.
September 6th, 2007 at 7:56 am
I got it already. I changed the ff. code in the controls.js:
this.options.minChars = this.options.minChars || 3;
September 17th, 2007 at 3:03 pm
Hi !
Can you tell me if the Script can Hide/Show trough a Code ? (Sorry for my BAD English).
When the Script create de Instance you can’t hide anymore… I need show or hide the Script if the Textbox have a text or another…
Thank You !
September 22nd, 2007 at 8:01 pm
Thanks for the great tutorial,
can anybody help me to with a multiple selection. I want to enter a list of items. Corresponding to the given example, I would like to enter
“The Strokes, The Clash, The Strokes” !!
And I have no idea hoe to manage this…
September 22nd, 2007 at 9:00 pm
… googling for one hour was successful…
new Ajax.Autocompleter(”search”,”hint”,”server.php”, { tokens: ‘,’ });
that’s cool
September 26th, 2007 at 8:46 pm
I have a problem with Internet explorer. autocomplete works on firefox but not on Internet Explorer… ?)
September 27th, 2007 at 4:33 am
Excellent tutorial. I implemented it, but needed a way to make still work even if your search statement is missing some words.
For example, say you’re searching for “Canon PowerShot SD800 IS Digital Elph” in a database of cameras… But you dont know the full name of your camera… just that its a canon, and the model number is SD800..
So you put in Canon SD800 .. but it brings up nothing.
Whereas if I put in “Canon PowerShot Sd….” it’d find it (as it should).
I needed it to ignore the fact that powershot was omited from the query.
You can read about the solution here -
http://www.susanbuck.net/sb/words/index.asp?permanent=yes&permKey=163
October 1st, 2007 at 4:19 pm
[…] Susan Buck has a lovely way to make your autocomplete smarter. She has provided an SQL query that will make your search a little more forgiving and it can be used directly with my Ajax Autocompletion for The Impatient tutorial. […]
October 2nd, 2007 at 11:58 pm
The dropdown menu looks like it’s in the wrong position when viewed in Opera. Can this be fixed without affecting the display on other browsers?
October 12th, 2007 at 5:54 pm
Works like a charm! Is there a simple way to make the list of returned suggestions have the typed text within the strings bold? For example if I type out “mit” and the list has a “John Smith”, is there a painless way for the “mit” part of “John Smith” be in bold text? Thanks for this code!
October 13th, 2007 at 12:43 am
Great job, the script and information that you provided works awesome!
I have one question that I was hoping you could answer or possibly help me with. Let’s say you have quite a few Titles in your DB, when the user starts their query in the txt field this then returns a ton of results that makes the div too long which makes the div drop way to long on the page. Is there a way to just include 5 results in the div or 5 results with a scrollbar similar to google suggest? I haven’t been able to figure this one out so any help would be much appreciated!
You guys sure are wise!
October 31st, 2007 at 11:07 am
i have a problem with the pressing up and down when the list come out.
when the list shows, it doesn’t have a default selected field that i can just enter and get the words. in this case, i can’t move up and down by pressing the up and down button.
anyone know what’s the problem?
i downloaded the whole file and just edit the database part.
October 31st, 2007 at 3:25 pm
Wow. This makes life so simple. I actually learned more from downloading and exploring your code than from reading through tons of post found on “tutorial” sites! Thank you so much.
November 6th, 2007 at 5:22 pm
Hi Tim,
Thank you for the tutorial, it works like a charm. However i do have a question. Perhaps you could find the time to help me out.
Now the script is autocompleting just one field. But if it’s possible i also want it to complete a few others.
For example
Company name
Address
Location
So when someone fills out the correct company name the address- and the locationfield get filled out as well.
Do you have a suggestion how to achieve this?
November 19th, 2007 at 5:23 pm
Can I use this autocompleter tool with two select item i.e. an other field and print this in an other list?
November 22nd, 2007 at 5:47 am
It’s working nicely for me.
December 2nd, 2007 at 6:21 am
Have you guys tested this with scriptaculous 1.8 and Prototype version 1.6? I get a recursion error that looks like this…
too much recursion
[Break on this error] var elementStyle = element.style, match;
The builds correctly because I can see the result in FireBug.
December 6th, 2007 at 9:17 am
Hi all,
I have tried to implement this using ASP instead of PHP. However I cant get it to quite work. When you type a letter into the text box the selection field comes up but it displays everything in the table instead of just what begins with the inital character. searchSQL=”SELECT name FROM people WHERE name like ‘%”&Request.Form(”nomineeName”)&”%’” that is what I am using and it seems fine to me. Can anyone help?
December 10th, 2007 at 8:11 pm
Hi all!
I have a little question about autocompleter.
Is it possible to set the amount of items that are showed in the suggest?
Thank you,
Leonardo
December 11th, 2007 at 12:43 pm
Hi Leonardo,
Use a LIMIT clause on you SQL statement. e.g LIMIT 0,5 will bring back 5 results.
December 18th, 2007 at 5:20 am
Does you know of a way to manually fire an event to kick off the Ajax.Autocompleter to provide suggestions?
I have all the code working just fine and the autocompleter works great. But I’d like to be able to fire it manually and have it provide suggestions based on other things.
Specifically - I want the suggestions to change when various radio buttons are selected (w/o text field changing). Thus I need to be able to manually kick it off without modifying the text field. Any thoughts?
December 31st, 2007 at 3:43 pm
I just implemented, but i can’t use the cursor keys on the keyboard to navigatie through the results?
January 6th, 2008 at 6:49 pm
Hi Tim,
I’m looking for a way to dislplay the list hints with the bottom of the list aligned with the top of the search box.
Now, I can set the top of the search results by changing offsetTop at line 62 of control.js. What I have tried is to set the offsetTop to be 0 - element.offsetHeight but element.offsetHeight is always same value and does not reflect the actual height of the list.
Where should I be looking to get the height of the hints list, or is that even possible?
Thanks
January 22nd, 2008 at 1:43 am
I would like some advise on how to included and css style multiple items in selection list
eg if I have a people search I want to display name,phone
AND prepopulate address and other details from list
January 22nd, 2008 at 6:22 am
ok now I have the problem of how do I restrict selection to only items in the list?
January 22nd, 2008 at 5:57 pm
Hi Paul, All you need to do is make your query more advances (select more fields) and out put them in the list item.
As far as your second comment goes, not sure what you are trying to do. Why not post the url to an example page and go into more detail?
Tim
January 24th, 2008 at 10:23 am
What changes are required in the server side code if built in ASP.NET??Is it supported??? I tried following but i doesn`t work
Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
‘Put user code to initialize the page here
If Not IsPostBack Then
Dim con As New SqlConnection(ConfigurationSettings.AppSettings(”Con1″))
Dim cmd As SqlCommand
Dim dr As SqlDataReader
Dim name As String = Request(”search”)
cmd = New SqlCommand
cmd.Connection = con
cmd.CommandText = “Select au_fname from authors where au_fname like ‘” & name & “%’”
con.Open()
dr = cmd.ExecuteReader()
Response.Flush()
While dr.Read
Response.Write(”" & dr.GetString(0) & “”)
End While
con.Close()
End If
End Sub
January 28th, 2008 at 1:15 pm
Hi, am stuck.
Whenever i try to change the input ‘id’ to anything else apart from ’search’ the whole thing doesn’t work. This means am unable to add more than one autosuggest on the same form
Please help.
February 3rd, 2008 at 7:39 pm
This was great, and easy!
But please help, cant get it work with scandic-letters
ä and ö! (ä)
same broblem with every autocomplete.
tried without mysql, but same problem. with utf-8 and ansi files(saved with notepad++)
February 3rd, 2008 at 8:08 pm
tought never get it work.. ajax sends string to mysql and there chars were wrong type, after converting from utf to ansi, worked seamlessly
February 12th, 2008 at 4:21 pm
Hi, first off, great tools and tutorial, thanks.
I am working on a coldfusion site. I am trying to get this to work. I have followed everything in the tutorial. And by using Firebug, I be able to see the list is generating in the background. However, there are no list showing in the front end.
The followings are my codes, I have included all necessary javascripts and I am not sure if I am missing any css script and that causes this problem?
Type here
new Ajax.Autocompleter(”search”,”hint”,”cfserver.cfm”);
————————————-
cfserver.cfm
————————————-
SELECT *
FROM allocation
WHERE (
((allocation.allocation_code) LIKE ‘%#UCase(TRIM(FORM.search))#%’)
OR ((allocation.alpha_sort) LIKE ‘%#UCase(TRIM(FORM.search))#%’)
OR ((allocation.account) LIKE ‘%#UCase(TRIM(FORM.search))#%’)
OR ((allocation.long_name) LIKE ‘%#UCase(TRIM(FORM.search))#%’)
OR ((allocation.short_name) LIKE ‘%#UCase(TRIM(FORM.search))#%’)
OR ((allocation.fund_name) LIKE ‘%#UCase(TRIM(FORM.search))#%’)
)
ORDER BY allocation.allocation_code DESC
#q_searchAllocations.LONG_NAME#
Will anyone please help??
thanks a lot!!!
February 14th, 2008 at 3:04 am
Hi, I have just tried this script at home. I am using my home pc as a php server and also mysql is in the same box. So that I can test stuff out. It works perfectly at home. The CSS successfully generate the ul and li tag. However, back to work in coldfusion, it didn’t generate the ul and li tag, all it display is a list of data from the server script.
I am really confuse now.. please help
March 4th, 2008 at 10:36 pm
Any hints on how to up the opacity? I don’t want to see my form underneath the dropdown. When I change it from 0 to 100 in controls.js. I get the text ‘false’ floating in the dropdown box. Thanks!
March 15th, 2008 at 6:56 pm
Thanks for all the input - comments now closed.