自動完成的功能即Autocomplete,具體的例子可以在這裡看: http://www.b2c-battery.co.uk
在Search框內輸入一個產品型號,就可以看見效果了。
這裡用到了一個開源的代碼: AutoAssist ,有興趣的可以看一下。
以下為代碼片斷:
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>
不知道為什麼不能用keywords做文本框的名字,我試了很久,後來還是用keyWord,搞得還要修改原代碼。
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
}
?>
原來的例子中的CSV文件是根據\t來分隔的,我們也可以用空格或其它的來分隔,這取決於你的數據結構。
當然你也可以不讀文件,改從數據庫裡讀資料,就不再廢話了。