近日学习了一下AJAX，照做了几个例子，感觉比较新奇。 

   第一个就是自动完成的功能即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来分隔的，我们也可以用空格或其它的来分隔，这取决于你的数据结构。 

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

   效果图如下：