AJAX Suggest

AJAX can be used to create more interactive applications. Using AJAX, we can make use of live server-powered autocompleting text fields. If desired, it is possible to display additional information in the autocomplete dropdown that you don't want inserted into the field when you choose an item (such as a logo or address).
Example – The HTML page
The HTML page contains a link to an external JavaScript, a simple HTML form, and a span element:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<html>
 
<head>
 
<script type="text/javascript" src="clienthint.js"></script>
 
</head>
 
<body>
 
<form>
 
First Name: <input type="text" id="txt1" onkeyup="showHint(this.value)" />
 
</form>
 
<p>Suggestions: <span id="txtHint"></span></p>
 
</body>
 
</html>
Example – The JavaScript code
This is the JavaScript code, stored in the file "clienthint.js":
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83

var xmlhttp
 
function showHint(str)
 
{
 
if (str.length==0)
 
  {
 
  document.getElementById("txtHint").innerHTML="";
 
  return;
 
  }
 
xmlhttp=GetXmlHttpObject();
 
if (xmlhttp==null)
 
  {
 
  alert ("Your browser does not support XMLHTTP!");
 
  return;
 
  }
 
var url="gethint.php";
 
url=url+"?q="+str;
 
url=url+"&sid="+Math.random();
 
xmlhttp.onreadystatechange=stateChanged;
 
xmlhttp.open("GET",url,true);
 
xmlhttp.send(null);
 
}
 
function stateChanged()
 
{
 
if (xmlhttp.readyState==4)
 
  {
 
  document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
 
  }
 
}
 
function GetXmlHttpObject()
 
{
 
if (window.XMLHttpRequest)
 
  {
 
  // code for IE7+, Firefox, Chrome, Opera, Safari
 
  return new XMLHttpRequest();
 
  }
 
if (window.ActiveXObject)
 
  {
 
  // code for IE6, IE5
 
  return new ActiveXObject("Microsoft.XMLHTTP");
 
  }
 
return null;
 
}
Example - The PHP page
The code in the "gethint.php" checks an array of names and returns the corresponding names to the client:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131

<?php
 
// Fill up array with names
 
$a[]="Anna";
 
$a[]="Brittany";
 
$a[]="Cinderella";
 
$a[]="Diana";
 
$a[]="Eva";
 
$a[]="Fiona";
 
$a[]="Gunda";
 
$a[]="Hege";
 
$a[]="Inga";
 
$a[]="Johanna";
 
$a[]="Kitty";
 
$a[]="Linda";
 
$a[]="Nina";
 
$a[]="Ophelia";
 
$a[]="Petunia";
 
$a[]="Amanda";
 
$a[]="Raquel";
 
$a[]="Cindy";
 
$a[]="Doris";
 
$a[]="Eve";
 
$a[]="Evita";
 
$a[]="Sunniva";
 
$a[]="Tove";
 
$a[]="Unni";
 
$a[]="Violet";
 
$a[]="Liza";
 
$a[]="Elizabeth";
 
$a[]="Ellen";
 
$a[]="Wenche";
 
$a[]="Vicky";
 
//get the q parameter from URL
 
$q=$_GET["q"];
 
//lookup all hints from array if length of q>0
 
if (strlen($q) > 0)
 
  {
 
  $hint="";
 
  for($i=0; $i<count($a); $i++)
 
    {
 
    if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
 
      {
 
      if ($hint=="")
 
        {
 
        $hint=$a[$i];
 
        }
 
      else
 
        {
 
        $hint=$hint." , ".$a[$i];
 
        }
 
      }
 
    }
 
  }
 
// Set output to "no suggestion" if no hint were found
 
// or to the correct values
 
if ($hint == "")
 
  {
 
  $response="no suggestion";
 
  }
 
else
 
  {
 
  $response=$hint;
 
  }
 
//output the response
 
echo $response;
 
?>
PHP While Loops
AJAX Introduction
AJAX XML
AJAX responseXML