In knowing this, I spent some time looking at a large number of jQuery plugins that do this. For some time, I couldn’t find any that fit the specific need I had. There was one plugin that I thought would work, but I couldn’t get it to work with a MySQL database, as it was designed to work with plain text lists in PHP. It may seem pathetic, but I couldn’t translate it.

So finally, I found the specific solution I wanted, and also manipulated the code examples enough to get it to work with MySQL. In light of this, and in light of my difficulty finding good examples for this, I want to give an example here, for myself and any others with the issue.

Steps

1. Download the latest jQuery.
2. Download the latest Autocomplete Plugin from bassistance.de.
3. Include the bgiframe plugin for the sake of Internet Explorer users, in case this appears within a larger form. You can include this with a conditional comment if you wish.
4. Create a MySQL database that contains the items from which you’ll be suggesting. There are many great tutorials out there for this kind of thing.
5. Include your JavaScript files in a page with the following HTML, additional JavaScript, PHP, and CSS.

HTML form markup

So let’s say we have the following XHTML. I’m not concerned with specific areas of content at the moment, just a basic auto-suggest form that does not submit to anything in particular.

1. <div id="wrapper">
2. <form id="suggest-form">
3. <div>
4. <label for="field">Search for something</label>
5. <input type="text" name="field" id="field" />
6. </div>
7. </form>
8. </div>

jQuery Auto Suggest code

The jQuery plugin for this technique works in such a way that it examines the contents of the text field as users type in it, and as it does this it sends requests to PHP to see what contents in the database (or other PHP content) match what is being typed. Each time a letter is pressed or deleted, this occurs again. jQuery then creates HTML that displays the results to the user.

After the plugin is loaded, the following JavaScript is loaded. For myself, I normally put this into a main.js file, though for the purposes of this example I have kept it inside the source, and you can view it there if you wish.

1. function suggestValues() {
2. $("#field").autocomplete("http://design.jonathanstegall.com/autosuggest/suggestions.php", {
3. width: 260,
4. selectFirst: false
5. });
6. }
7. $(document).ready(function(){
8. suggestValues();
9. });

PHP search code (suggestions.php)

In this particular example, we’ll use PHP to connect to a MySQL database and get search results. I have a specific test database here, with keywords that are used in this blog. Obviously, you’ll need to modify the code for your own purposes, and there is no reason to use suggestions.php; you’ll just need to take note of the filename in order to include it in the JavaScript code above.

1. First, you will need to have an active connection to your database. I can’t possibly predict all the ways that this can happen, so I will assume that you are already connected to it and can run queries on it.
2. function autosuggest() {
3. $q = strtolower($_GET["q"]);
4. if (!$q) return;
5. $query = "SELECT name FROM keywords";
6. $results = mysql_query($query);
7. while($result = mysql_fetch_array($results)) {
8. $name = $result['name'];
9. if (strpos(strtolower($name), $q) !== false) {
10. echo "$name\n";
11. };
12. };
13. }
14. autosuggest();

CSS example

There is also some CSS that needs to be present to account for the default behavior of the plugin. The JavaScript, as I said, creates HTML on the fly, and this HTML can be styled very easily. Here is an example of what I have used. You can also see this in the source, if you view it, though again it would normally be inside a CSS file.

1. .ac_results {
2. padding: 0;
3. border: 1px solid #333;
4. background-color: #fff;
5. overflow: hidden;
6. z-index: 99999;
7. text-align: left;
8. }
9. .ac_results ul {
10. width: 100%;
11. list-style-position: outside;
12. list-style: none;
13. padding: 0;
14. margin: 0;
15. }
16. .ac_results li {
17. margin: 0;
18. padding: 2px 5px;
19. cursor: default;
20. display: block;
21. font: menu;
22. font-size: 10px;
23. line-height: 16px;
24. overflow: hidden;
25. }
26. .ac_results {
27. background-color: #eee;
28. }
29. .ac_over {
30. background-color: #0e2221;
31. color: #fff;
32. }

Put it all together

I have created a file at http://design.jonathanstegall.com/jquery/autosuggest/ that demonstrates the jQuery auto suggest technique that I have discussed. This is a very foundational concept, and the plugin does come with some configuration options, but I feel that this is important since most of us will be using this plugin with a database of some kind.

Feel free to leave any additional thoughts or questions in the comments.

Over the years, many people have written various solutions to go around this, and cause the page to load multiple functions. Typically, my favorite is this one from Simon Wilson. It’s easy, concise, and works in a myriad of different situations.

The other day, though, I ran into a situation where it didn’t work. I’m still not sure what the issue was, but Internet Explorer 6 (of course) refused to load a couple of the functions I was trying to use. Firefox, IE7, Safari, etc. all loaded them very nicely, but IE6 remained stubborn. I tried everything: rewriting the functions, removing everything else in the page, changing random things that were unrelated, and so on, all to no avail.

Finally, I decided to try jQuery‘s load solution:

1. $(document).ready(function() {
2. functionname();
3. });

This worked perfectly, in every browser. It didn’t occur to me to use this, mainly because the offending functions are not jQuery functions, and that particular page in the site didn’t have any jQuery on it at all. Now, it does.

File this away under: “I’m already using jQuery on a site, and I need to load some non-jQuery functions.”

Standards as a whole

Microsoft, especially in the last year or two, has made a lot of moves toward standards, web and otherwise. They announced the Interoperability Principles. They announced the ASP.NET MVC Framework, which finally allows programmers to control the HTML generated by ASP.NET. IE8 will pass Acid2, and any number of other things.

While I’m not optimistic that any of this will cause Microsoft to act in any unexpected ways with respect to its attempts to acquire Yahoo, it is clear that a shift is occurring, to whatever extent.

Noise from the web standards community

Advocates of web standards have made a lot of noise about the original decision, and it is clear that Microsoft listened. Many people made logical arguments for why IE8, especially from a long-term perspective, should not default to IE7 behavior, while understanding that the option for IE7 behavior was a good thing.

Legal issues

It’s entirely possible that this is partly related to Microsoft’s various legal troubles, and that they are trying to appear as a better business citizen to help their case.

Future versions of IE

I think one of the most significant benefits, both from the perspective of future versions of IE, as well as future versions of Firefox, Opera, Safari, etc., is that the need for version targeting will probably become much less because IE8 is the default behavior. People who create sites that break in IE8 will, certainly, have the option of targeting IE7, but in order to do that they’ll have to learn that they can.

Most people who will run into the issue will probably not have the interest (or the time, possibly) to find out this kind of solution. The ones who do find out about the solution will find out that Microsoft doesn’t see it as the ideal solution, and will probably feel at least some pressure to learn proper ways of doing things. Thus, in a few years, it is entirely possible that versions of Internet Explorer that follow version 8 will be met with a majority of sites that do not break.

That’s not to say that the majority of sites will follow web standards. I’ve seen innumerable websites that didn’t break when IE7 came out, because they had such disregard for web standards that none of the changes affected them. I suspect we’ll have to deal with this for a long time. But that’s fine with me, as the future of web browsers can continue to look forward.

IE8 has been significantly enhanced, and was designed with great support for current Internet standards. This is evidenced by the fact that even in its first beta, IE8 correctly renders the popular test known as 'Acid2,' which was created by the Web community to promote real-world interoperability,” said Ray Ozzie, Microsoft chief software architect. “Our initial plan had been to use IE7-compatible behavior as the default setting for IE8, to minimize potential impact on the world's existing Web sites. We have now decided to make our most current standards-based mode the default in IE8.

The web standards world has been abuzz for the last few weeks, following the announcement that Internet Explorer 8 (and, presumably, any number of future releases) would have the default behavior of rendering websites in the same way that Internet Explorer 7 does. Causing the browser’s behavior to advance would have required that designers and developers direct it to do so with a meta tag.

Many standards-aware designers and developers were very understanding of the decision to allow websites to target IE7, avoiding issues with badly-programmed websites that break when browsers move forward. However, many of these designers and developers made a lot of noise wishing that Microsoft would allow the default behavior of websites to advance as the browser does, and require those who want to target IE7 to read a little bit and find out about the meta tag.

Apparently, Microsoft listened to the noise. I’m amazed and pleased by this change in strategy. I hope they will be able to spread the word enough, so that websites that will break with IE8′s improved standards support will learn about their options (1. learn how to write standards-compliant code, 2. include a one-line meta tag). I feel pretty confident that this is unrealistic, but I hope that it will happen to the extent that Microsoft doesn’t have to go back on this decision.

…I'm delighted to tell you that on Wednesday, December 12, Internet Explorer correctly rendered the Acid2 page in IE8 standards mode. While supporting the features tested in Acid2 is important for many reasons, it is just one of several milestones for the interoperability, standards compliance, and backwards compatibility that we're committed to for this release. We will blog more on these topics.

Wonderful news. Web designers and developers everywhere agree with me that IE6 is the bane of our existence. There’s no need to discuss this further. IE7 is a massive improvement, and in general I’m pleased with the direction that the team seems to be taking for the future.

Acid2 compliance is, for me, an unexpected leap forward. Currently, Opera and Safari are the most widely used browsers that have achieved this milestone. Firefox 2.x does not reach this level, although Firefox 3 (which is in beta and, I’m sure, will be released well before IE 8 is) does.