DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> AJAX入門 >> AJAX詳解 >> Ajax自動完成功能實例
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來分隔的,我們也可以用空格或其它的來分隔,這取決於你的數據結構。

當然你也可以不讀文件,改從數據庫裡讀資料,就不再廢話了。

 

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved