HomeType-Ahead Script Updated
One of the feature I decided early on to include in the Time-Tracker application was a type-ahead tool, akin to the famous Google Suggest. You can take a look at the old demo do get an idea of what I’m talking about.
After just a few weeks into the development of the Time-Tracker, the Type-Ahead script was ripe for refactoring. I needed a way to handle private suggestion lists as well as shared lists. I also wanted to use the same Type-Ahead object for several input fields.
The new version now runs smoothly in the Time-Tracker. Here’s how to use it in your own projects (licensed under the CC-GNU LGPL).
Source Files
- Client-side javascript: typeahead.js
- PHP script: srvc-type-ahead2.php
Writing the server-side script in a different language is quite trivial. You’re welcome to share your version in the comment form below (or send me a mail).
Usage Notes
Add the following javascript code to your page to add the Type-Ahead behavior to any text field.
/* Wait for the page to finish loading */
XBrowserAddHandler(window,'load', function() {
/* Instanciate the TypeAhead object */
var typeAhead = new TypeAhead('listName', 'groupName');
/* Assign the TypeAhead Object to an input field */
typeAhead.initInput('inputFieldID');
} );
The listName / groupName pair identifies the list of suggestion in the database. If you omit the groupName parameter the list will be shared by everyone. If you set the groupName to something unique, like a username or userid, you’ll have a distinct list per user (or group, whatever…).
The second line binds the object to an input field. As a reference, here’s the HTML markup for the input field. Note that the value of the id attribute is the one used in the binding above.
<input type="text" id="inputFieldID" name="..." ... />
The Type-Ahead object can be binded to only one input at a time, but it can be reassigned to a different field easily and quickly, for instance when the field gets the focus:
document.getElementById('inputFieldID').onfocus = function() {
typeAhead.initInput('inputFieldID') };
document.getElementById('anotherFieldID').onfocus = function() {
typeAhead.initInput('anotherFieldID') };
Database Structure
The ‘USER’ column has been added to the SUGGESTIONS table since the last version . Here’s the SQL statement for MySQL:
CREATE TABLE `SUGGESTIONS` (
`ID` int(11) NOT NULL uto_increment,
`FIELD_ID` varchar(100) NOT NULL default '',
`VALUE` varchar(255) NOT NULL default '',
`USER` varchar(255) NOT NULL default '',
`FREQUENCY` int(11) NOT NULL default '1',
PRIMARY KEY (`ID`))
TYPE=MyISAM AUTO_INCREMENT=1 ;
You’ll need to create a database with this table and change the connection settings in the PHP file (database name, username and password).
Browsers Supported
The type-ahead functionality works with IE5.5+, Safari 1.2+, Gecko-based browsers (Firefox, Mozilla, Netscape 7+, … ) and Opera 7+(*).
(*) Prior to Opera 8.1, user inputs are not recorded in the database.
Note: Comments are now closed. Please visit the discussion board if you want to discuss the subject of this post. Thank you.
August 6th, 2005 at 7:48 pm
this is nice but you need to fix the following:
‘ +
‘’ +
‘» Blogs that link here‘ +
‘’ +
‘‘ +
‘’
);
function drawTREmbeds(s){
document.write(s);
}
// –>
It should be “drawTREmbeds”, not “drawTREmbed”.
August 6th, 2005 at 10:53 pm
Peter, thanks for pointing that out (though I’ve no control over this script, it’s generated by technorati).
October 20th, 2005 at 1:09 am
Hello,
the script is really nice. But there is one thing missing.
When there’s no absolute positiont of the input field the selection field by the script will be somewhere on the page. Not really helpful. So you should include a little script that gets the the absolute position of the input field and points the selection field beneath it.
Just like this:
var c = GetCoords(oText);
var n = oText.style.pixelHeight;
if( !n )
{
n = 25;
}
else
{
n += 2;
}
oDiv.style.left = c.x;
oDiv.style.top = c.y + n;
oDiv.style.display = ‘none’;
oDiv.style.position = ‘absolute’;
That would be really great. Please let me know when you have implemented it.
Best regards,
Tobias
October 27th, 2005 at 12:49 am
Hello,
first of all, very nice script. But is have another question.
Imagine you have a database table with all names “Jane,Emily,Cindy,Caroline,….”
Would it be possible with this script, with some adjustments, to perform an mysql query which gets all the names out of the table and uses this result as the list of suggestions.
Kind regards
Jonathan
November 23rd, 2005 at 5:53 am
I tried this script and it doesn’t seem to work. I’m using FF, and when i type in say “Dum”, I don’t get the “Dummy Data” entry, but if i hit backspace I do.
On my own server with your latest js, I can only seem to list the entries that come up by default before you type in your box.
Any thoughts?
January 30th, 2006 at 9:22 pm
oops.. didn’t see that one, sorry for the delay Adam. I haven’t looked at this script for a while and I’m not sure if this problem has been fixed or not, but in any case I don’t think I will update/fix this script until I have enough time for a complete refactoring.. I would advise people to look for similar scripts elsewhere in the meantime.
March 14th, 2006 at 3:25 am
Great work!
I was implementing a test of the script and ran into a bump in the road (though it’s more than likely just my misunderstanding). I have a table with 3000+ records. The max for the drop down is set to 20, which is fine; I’d imagine that it only shows the 20 closest in the drop down. But it appears as though those are the only 20 that I can autocomplete from. Like if the list shows Aa-Ar (alphabetically), and I type “B”, it gives no suggestions… Any ideas on what I’m missing?
Thanks
March 15th, 2006 at 11:32 am
i need the coding for jsp or servlet(server-side script)-with in this afternoon..plz…
March 15th, 2006 at 11:33 am
please send this one:i need the code for jsp or servlet immedietly
March 15th, 2006 at 9:21 pm
Valli… Sorry I don’t have the jsp version of the server-side code. Once you get one working though you’re welcome to share it.
March 16th, 2006 at 7:46 am
Tim, can you post a link to your page? I may have a different script that solves this problem.