Ajax Technology Practice Completion AJAX Auto Completion function

Ajax

Recently studied Ajax, according to do a few examples, feel more novel.

The first is the automatic completion of the function that AutoComplete, concrete examples can be seen here: http://www.b2c-battery.co.uk

Enter a product model in the search box to see the effect.

Here is an open source code: Autoassist, interested can look at.

The following is a code fragment:

index.htm
＜script type="text/javascript" src="javascripts/prototype.js">＜/script>
＜script type="text/javascript" src="javascripts/autoassist.js">＜/script>
＜link rel="stylesheet" type="text/css" href="styles/autoassist.css"/>
＜div>
＜input type="text" name="keyword" id="keyword"/>
＜script type="text/javascript">
Event.observe(window, "load", function() {
var aa = new AutoAssist("keyword", function() {
return "forCSV.php?q=" + this.txtBox.value;
});
});
＜/script>
＜/div>

Do not know why can not use keywords to do the name of the text box, I tried for a long time, and later still use keyword, do have to modify the original code.

forCSV.php
＜?php
$keyword = $_GET['q'];
$count = 0;
$handle = fopen("products.csv", "r");
while (($data = fgetcsv($handle, 1000)) !== FALSE) {
if (preg_match("/$keyword/i", $data[0])) {
if ($count++ > 10) { break; }
?>
＜div onSelect="this.txtBox.value='＜?php echo $data[0]; ?>';">
＜?php echo $data[0]; ?>
＜/div>
＜?php
}
}
fclose($handle);
if ($count == 0) {
?>
: (, nothing found.
＜?php
}
?>

The CSV file in the original example is separated by \ t, and we can separate it with spaces or other, depending on your data structure.

Of course, you can not read the file, change from the database to read materials, no longer nonsense.

The effect chart is as follows: