Ajax自动完成功能

近日学习了一下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来分隔的，我们也可以用空格或其它的来分隔，这取决于你的数据结构。

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

效果图如下：

 

Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=635858

<script src="http://localhost:82/PromoteIcon.aspx?id=635858"> </script> [点击此处收藏本文]   jxyuhua发表于 2006年03月23日 12:08:00

<link href="http://blog.csdn.net/jxyuhua/Services/Pingback.aspx" rel="pingback"> <!--<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"xmlns:dc="http://purl.org/dc/elements/1.1/"xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/"><rdf:Descriptionrdf:about="http://blog.csdn.net/jxyuhua/archive/2006/03/23/635858.aspx"dc:identifier="http://blog.csdn.net/jxyuhua/archive/2006/03/23/635858.aspx"dc:title="Ajax自动完成功能"trackback:ping="http://tb.blog.csdn.net/TrackBack.aspx?PostId=635858" /></rdf:RDF>--><script><![CDATA[unction hide(){showComment();}]]></script>