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

2016-02-19 18:49 4 1 收藏

下面这个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

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

    不知道为什么不能用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

延伸阅读
提升用户输入效率的最佳做法之一是,为TextBox 与 ComboBox 控件加入自动完成功能。所谓自动完成功能,也就是当用户在输入某一个词句的时候,与已经输入的句首或词首相符的词句就会自动填入或显示出来让你选择。比如现在的google搜索的时候,你随便输入一点东西,会弹出与你输入最相近的一些搜索关键字。在.net中这个功能是很容易的,已经有相...
标签: Web开发
DWR(Direct Web Remoting)是一个WEB远程调用框架.利用这个框架可以让AJAX开发变得很简单.利用DWR可以在客户端利用JavaScript直接调用服务端的Java方法并返回值给JavaScript就好像直接本地客户端调用一样(DWR根据Java类来动态生成JavaScrip代码).它的最新版本DWR0.6添加许多特性如:支持Dom Trees的自动配置,支持Spring(JavaScript...
首先请从 Code Project 上下载源代码,其中包含了大量的 API 调用,还有详细的说明和示例,并且可以生成 ShellLib.dll 直接在自己的程序中调用。 源代码中介绍了如何使用 SHAutoComplete API,并演示了如何为 ComboBox 加入自定义的 StringTable,但没有说明如何为 TextBox 进行定义。其实这个功能经过少许的修改,就可以实现。 下面的代码说...
标签: Web开发
基于XML的异步JavaScript,简称AJAX,是当前Web创新(称为Web2.0)中的一个王冠。感谢组成AJAX的各种技术,Web应用的交互如Flickr, Backpack和Google在这方面已经有质的飞跃。这个术语源自描述从基于网页的Web应用到基于数据的应用的转换。在基于数据的应用中,用户需求的数据如联系人列表,可以从独立于实际网页的服务端取得并且可以被动态地...
标签: Web开发
Web开发领域的最新时髦术语其实质是“旧貌换新颜”。 Ajax(Asynchronous JavaScript and XML)是结合了Java技术、XML以及JavaScript等编程技术,可以让开发人员构建基于Java技术的Web应用,并打破了使用页面重载的惯例。 Ajax是使用客户端脚本与Web服务器交换数据的Web应用开发方法。这样,Web页面不用打断交互流程进行重新加裁,就可以动...

经验教程

713

收藏

22
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部