下面这个Ajax技术实践之完成Ajax自动完成功能教程由图老师小编精心推荐选出,过程简单易学超容易上手,喜欢就要赶紧get起来哦!
【 tulaoshi.com - Web开发 】
近日学习了一下AJAX,照做了几个例子,感觉比较新奇。
第一个就是自动完成的功能即Autocomplete,具体的例子可以在这里看: http://www.b2c-battery.co.uk
在Search框内输入一个产品型号,就可以看见效果了。
(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)这里用到了一个开源的代码: 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来分隔的,我们也可以用空格或其它的来分隔,这取决于你的数据结构。
当然你也可以不读文件,改从数据库里读资料,就不再废话了。
来源:http://www.tulaoshi.com/n/20160219/1619076.html
看过《Ajax技术实践之完成Ajax自动完成功能》的人还看了以下文章 更多>>