E-file:Cary


Cary的最新文章:
首页--文章内容

Ajax技术实践之完成Ajax自动完成功能
www.fh888.com 2006-3-25 17:37:04
媒体:csdn(北京)  作者:无一文
发布:Cary
近日学习了一下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来分隔的,我们也可以用空格或其它的来分隔,这取决于你的数据结构。

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

   效果图如下:

 
【声明】网页天堂刊载此文不代表同意其说法或描述,仅为提供更多信息,也不构成任何投资建议。转载请注明出处。
我也说两句
E-File帐号:用户名: 密码: [注册]
评论:(内容不能超过500字,如果您不填写用户名和密码只能以游客的身份发表评论。)

*评论内容将在30分钟以后显示!
发表须知:
一、用户须严格遵守国家法律和政策,包括但不限于《全国人大常委会关于维护互联网安全的决定》《信息网络传播权保护条例》等规定,审慎、合法地利用伊妃(E-file)平台发表言论、作品。
二、用户的言论、行为若涉嫌违法或侵权,用户可能被强制承担因该行为直接或间接导致的全部法律责任。依照法律法规规定,伊妃(E-file)运营方有义务提供用户资料,有义务和权利采取删除、屏蔽、断开链接等各种必要措施。
三、伊妃(E-file)中心授权网络法律专业研究服务机构“网络法苑”为用户及客户提供包括免费咨询在内的全方位的法律支持。

 




Copyright (C) 2000-2006 fh888.com All Rights Reserved