Ajax自动完成功能实例

<script type="text/javascript"><!--google_ad_client = "pub-2947489232296736";/* 728x15, 创建于 08-4-23MSDN */google_ad_slot = "3624277373";google_ad_width = 728;google_ad_height = 15;//--></script><script type="text/javascript"src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>

<script type="text/javascript"><!--google_ad_client = "pub-2947489232296736";/* 160x600, 创建于 08-4-23MSDN */google_ad_slot = "4367022601";google_ad_width = 160;google_ad_height = 600;//--></script><script type="text/javascript"src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>

【导读】本文介绍如何实现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"/> 


＜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; } 

?> 


＜?php echo $data[0]; ?> 

＜/div> 

＜?php 

} 

} 

fclose($handle); 

if ($count == 0) { 

?> 

: (, nothing found. 

＜?php 

} 

?> 

原来的例子中的CSV文件是根据/t来分隔的，我们也可以用空格或其它的来分隔，这取决于你的数据结构。

当然你也可以不读文件，改从数据库里读资料，就不再废话了。

效果图如下：

<script type="text/javascript"><!--google_ad_client = "pub-2947489232296736";/* 728x15, 创建于 08-4-23MSDN */google_ad_slot = "3624277373";google_ad_width = 728;google_ad_height = 15;//--></script><script type="text/javascript"src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>

<script type="text/javascript"><!--google_ad_client = "pub-2947489232296736";/* 160x600, 创建于 08-4-23MSDN */google_ad_slot = "4367022601";google_ad_width = 160;google_ad_height = 600;//--></script><script type="text/javascript"src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>