Ajax auto-completion function example

The Autocomplete function is automatically completed, the specific example can be seen here: http://www.b2c-battery.co.uk

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

Here we use an open-source code: AutoAssist. If you are interested, you can take a look.

The following is a code snippet:

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>

I don't know why I can't use keywords as the text box name. I tried it for a long time. Later I used keyword 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 } ?>

In the original example, CSV files are separated by \ t. We can also use spaces or other separators, depending on your data structure.

Of course, you can read data from the database instead of reading files.

As follows:

(