Go homepage(回首页)
Upload pictures (上传图片)
Write articles (发文字帖)

The author:(作者)归海一刀
published in(发表于) 2014/3/16 2:52:23
Ajax技术实践之完成Ajax自动完成功能_[AJAX教程]

Ajax技术实践之完成Ajax自动完成功能_[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来分隔的，我们也可以用空格或其它的来分隔，这取决于你的数据结构。


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


效果图如下：



来源：CSDN





赞

If you have any requirements, please contact webmaster。(如果有什么要求，请联系站长)




QQ:154298438
QQ:417480759