Ajax technical practice-Ajax Automatic completion Function

I recently learned about Ajax and made a few examples to find it novel.

The first is the Autocomplete function, 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.txt box. 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 on_Select = "this.txt Box. 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:

Transferred from 81M.net