ajax suggest

advanced ajax, css, js, mysql, php 3266 misterhaan

using ajax to suggest possible values when a user starts typing in a field can help get more consistent values as well as saving time for users. i wanted to add an ajax suggest feature to track7 and couldn’t find all the information i needed in one place, so i decided to write up what i learned. this guide walks through the steps of creating an ajax suggest feature that supports selection with keyboard or mouse from scratch using javascript, css, php, and mysql. usernames are used as an example since that’s the first place track7 used ajax suggest. this guide will make more sense to those with intermediate knowledge of javascript and basic knowledge of ajax and css.

track7 no longer uses this method. an updated guide, ajax user suggest explains how to reach a similar result using jquery and knockout.

  1. generate list of suggestions on the server
  2. prepare the field
  3. request suggestions
  4. display the suggestions dropdown
  5. support mouse selection
  6. support keyboard selection
  7. all 6 pages

generate list of suggestions on the server

suggestions are going to be based off what’s been entered into the field, so the script on the server needs to take that as input. for username suggestions i decided to look for names that start with what was entered and then add names that contain it but don’t start with it. i also chose to limit the number of suggestions to 8 — if what you’re looking for isn’t on the list, type another character and maybe it will be. it’s sometimes more helpful to use more complicated logic — for example, track7 users can mark other users as their friends, so i could have put friends whose names contain the value first on the list before non-friends whose names start with the value, assuming users are more likely to choose their friends.

here’s the actual php code track7 uses to return matching usernames:

define('MAX_SUGGEST', 8);
header('Content-Type: text/plain; charset=utf-8');
$count = 0;
$us = 'select login from users where login like \'' . addslashes($_GET['match']) . '%\' order by login';
if($us = $db->Get($us, '', '', true))
  while($u = $us->NextRecord()) {
    echo "\n" . $u->login;
    if(++$count >= MAX_SUGGEST)
      die("\n<more>");
  }
$us = 'select login from users where not login like \'' . addslashes($_GET['match']) . '%\' and login like \'%' . addslashes($_GET['match']) . '%\' order by login';
if($us = $db->Get($us, '', '', true))
  while($u = $us->NextRecord()) {
    echo "\n" . $u->login;
    if(++$count >= MAX_SUGGEST)
      die("\n<more>");
  }
if(!$count)
  die('<no matches>');

the $db->Get and $us->NextRecord are from auDB — if you aren’t familiar with that, just know that’s how i’m running my queries and looping over the results. the first query finds usernames that start with the value (in $_GET['match']) and the second finds those that don’t start with the value but contain it somewhere else. both loops output a username, increment the count, quit if the count is over the max adding <more>. if it’s still going after both loops, put out <no matches> if nothing was found. the format is plain text with one match per line. there will actually be a blank line first which should be ignored, and if a line is in angle brackets (like <more>) then it is a message and not a match.

if i had included the users who are friends at the top, i may have also included an indicator that those users are friends. that could be done by using some sort of delimiter between username and friend status (still with one line per match, this would be like csv), or go with a structure like xml or json. test the script by visiting its url in a browser with various ?match= values at the end to make sure it’s showing the expected results. since the content type was set to text/plain (php usually defaults to text/html) the browser should display it correctly with one result per line.

  1. generate list of suggestions on the server
  2. prepare the field
  3. request suggestions
  4. display the suggestions dropdown
  5. support mouse selection
  6. support keyboard selection
  7. all 6 pages

how was it?

comments

there are no comments on this guide so far. you could be the first!

*