How do I get an Autosuggest Textbox effect like Google?

  • natas
  • PHP Ninja
  • Proficient
  • natas
  • Posts: 308
  • Loc: AFK

Post 3+ Months Ago

How do I get an effect like on google search input fields, where you type in a couple of letters and it automatically filters out results based on what you type.

For instance I have a database filled with items. The ID's all start with either "L", "GD", "BV" or "RF".

Is there a way that when the user types in "L", then only those items starting with "L" show up in the select box?
  • SpooF
  • ٩๏̯͡๏۶
  • Bronze Member
  • User avatar
  • Posts: 3423
  • Loc: Richland, WA

Post 3+ Months Ago

I use this plugin to do all my auto completes.
  • joebert
  • Genius
  • Genius
  • User avatar
  • Posts: 13511
  • Loc: Florida

Post 3+ Months Ago

The basic functionality is fairly simple, you send the contents of the text box to a server and have the server return things the user could be getting ready to type out.

Where it gets complicated, is trying to predict what each user may actually be typing, rather than simply retrieving what they could be typing.

For instance with Google, if someone were to type "L", there are thousands of possible words starting with the letter L the user could be getting ready to type. who knows how many possible two or more word phrases they could be getting ready to type.

It's really not very useful to the user if you return thousands of possibly options, it would be faster for them to type out the word or phrase themselves.

Autosuggest textboxes typically have around 10 choices in them at most. It really wouldn't make sense to just randomly pick 10 L words to return though, there wouldn't be very good odds that what the user is typing would be returned like that.

Two of the major things Google has to do for their autosuggest to work, are both things that rely on user behavior and previous searches. Google has more data to compile statistics from that you and I will ever see in our entire lives.

The first thing, is keeping track of how many times words and phrases are searched for, globally, by all users.

The second thing, which doesn't always come into play if a user isn't logged in or allowing cookies, is specific users searches.

Google will typically favor user-specific results over global results. If there aren't enough user-specific possibilities, they fill the gap with global possibilities.


What you'll want to do for starters, is start logging what is being typed into the text box. You're going to want to collect this information for awhile, maybe a day, maybe a month, depending on how often your search box is used.

A simple database table with three columns "phrase", "first_letter", and "num" is enough for starting collection.

Every time someone submits a search, you add the phrase they searched for, or update the num column.

If your table uses "phrase" as a primary key, a query similar to this would work.

SQL Code: [ Select ]
INSERT INTO TABLE (first_letter, phrase, num)
VALUES ('m', 'my phrase', 1)
  1. INSERT INTO TABLE (first_letter, phrase, num)
  2. VALUES ('m', 'my phrase', 1)
  3. ON DUPLICATE KEY UPDATE num = num + 1

After awhile you'll have a table similar to this.

Code: [ Select ]
first_letter, phrase, num
'a', 'apple pie', 12
'a', 'air', 1
'h', 'health food store', 1612
'h', 'happiness', 65
'h', 'healthy living', 897
'j', 'juice box', 77
  1. first_letter, phrase, num
  2. 'a', 'apple pie', 12
  3. 'a', 'air', 1
  4. 'h', 'health food store', 1612
  5. 'h', 'happiness', 65
  6. 'h', 'healthy living', 897
  7. 'j', 'juice box', 77

Before you utilize the table, you'll want to clean it up so it only contains items you actually have results for. You don't want to suggest things you have no results for.

Once the table is slimmed down, you can start querying that table as the user types by sending what the user typed and looking it up in this table.

SQL Code: [ Select ]
WHERE first_letter = 'h' AND phrase LIKE 'hea%' ORDER BY num LIMIT 10
  2. WHERE first_letter = 'h' AND phrase LIKE 'hea%' ORDER BY num LIMIT 10

where "LIKE 'hea%'" would have been the three letters the user had a chance to type before the autosuggest kicked in.

Basically, you'll start a javascript timer the moment the users key is pressed, maybe 300 milliseconds, and once that timer expires you send the contents of the text box to the server, the server looks up possible phrases, and returns the possibilities.

Since it takes a moment for the communication with the server, the user may have typed a few more letters. You can loop through the returned sugggestions with javascript one last time to sift out now impossible results before actually displaying them to the user.


People come up with all sorts of new tricks to guess what their users are likely to be searching for every day. One thing you can do is keep track of what each of your individual users searches for via accounts.

The term "autouggest" should turn up a lot of information on the subject. :)

Post Information

  • Total Posts in this topic: 3 posts
  • Users browsing this forum: No registered users and 58 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum

© 1998-2017. Ozzu® is a registered trademark of Unmelted, LLC.