Ajax技术实践之完成Ajax自动完成功能_AJAX教程

编辑Tag赚U币
教程Tag:暂无Tag,欢迎添加,赚取U币!

推荐:我的第一个AJAX程序
Author:zfive5(zhaozidong)Email :zfive5@yahoo.com.cn 礼拜五下午公司网站维护的同事问我怎样实现一个功能,一个提交页上有两个select,第二个select根据第一个select变,我的第一念头就

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

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

效果图如下:

点此在新窗口浏览图片

分享:Ajax 中的高级请求和响应
对于很多 Web 开发人员来说,只需要生成简单的请求并接收简单的响应即可;但是对于希望掌握 Ajax 的开发人员来说,必须要全面理解 HTTP 状态代码、就绪状态和 XMLHttpRequest 对象。在本文中

来源:模板无忧//所属分类:AJAX教程/更新时间:2008-08-22
相关AJAX教程