Ajax自动完成功能

最新推荐文章于 2017-09-14 14:38:35 发布

xzclog

最新推荐文章于 2017-09-14 14:38:35 发布

阅读量147

点赞数

分类专栏： XML 文章标签： Ajax PHP JavaScript .net CSS ViewUI

XML 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

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

第一个就是自动完成的功能即Autocomplete,具体的例子可以在这里看：http://www.b2c-battery.co.uk

在Search框内输入一个产品型号，就可以看见效果了。

这里用到了一个开源的代码：AutoAssist ，有兴趣的可以看一下。

以下为代码片断：

index.htm

<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
}
?>