Ajax自動完成功能執行個體

ajax

【導讀】本文介紹如何?Ajax自動完成的功能，即Autocomplete，舉例在Search框內輸入一個產品型號，就可以看見效果了。

自動完成的功能即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來分隔的，我們也可以用空格或其它的來分隔，這取決於你的資料結構。 當然你也可以不讀檔案，改從資料庫裡讀資料，就不再廢話了。 效果圖如下：