学习型 ASP/PHP/ASP.NET 主机 30元/年全能 ASP/PHP/ASP.NET 主机,支持月付专业 MSSQL 数据库空间,支持月付专业 MySQL 数据库空间,支持月付
发新话题
打印

[原创][Ajax]自动补全的输入框(带数据库搜索)

以下是引用nukq在2006-10-14 21:14:06的发言:

你好,能不能再说详细一点,对"关键字模糊搜索的细节"还没完全理解 :)

汉字拆字技术+关键字吧........

我参加工作了,近两个月会非常忙,等过段时间我再回来。

TOP

人呢?发给我份啊。

[url=http://hi.baidu.com/518bc]编程日记[/url]

TOP

回复:(ming206)人呢?发给我份啊。

好像没有加密阿,可以看源代码的

TOP

回复:(xiaopiao)回复:(ming206)人呢?发给我份啊...

看了一下
主要是这个文件
http://www.mipang.com/places/place_v2.v15.js
不过把回车和多于空格都去掉了,处理一下还是能看的,文件里提示需要用到
http://www.mipang.com/js/global.v6.js 中的函数

大致浏览了一下这个文件,他还作了查询缓存,同一关键词多次查询都在本地作了缓存,速度很快

用到的css在这个文件 http://www.mipang.com/css/common_v2.v11.css
就是这段:
#eps .pl { list-style:none;padding:5px;margin:0; }
.ac {padding:0px 0;font-family:Arial;}
.ac span {
text-decoration:none;
display:block;
cursor:default;
padding:0 10px 0 10px;
font-size:12px;
white-space:nowrap;
}
.ac span.sel {background-color:#9fbfff;}
.ac span b {}

input.valid { background:url(/images/check-small.gif) no-repeat 100% 50%;background-color:#fff;}
input.pending { background:url(/images/spinner.gif) no-repeat 100% 50%;background-color:#fff;}
input.error { /*background:url(/images/check-small.gif) no-repeat 100% 50%;*/ background-color:#ff5028;}

后台查询的地址是 http://www.mipang.com/places/place_search_xml.ue
返回的应该是xml代码,不过看了一下,其实是返回xml包裹起来的JSON代码
比如浏览器输入,查询shangh(上海)
http://www.mipang.com/places/place_search_xml.ue?action=Search&q=shangh
结果是
<?xml version="1.0" encoding="UTF-8"?>
<pps version="0.1" code="0"><places><![CDATA[[[3,3],[[2030,'上海','Shanghai','','中国'],[5606,'上杭县','Shanghang','','龙岩市'],[5894,'商河县','Shanghe','','济南']]]]]></places></pps>

把JSON代码嵌在CDATA段中返回的,不知道为什么这样设计而不是直接返回JSON代码,不过效率影响应该非常小,可能跟他原始接口设计有关。
他是UTF8编码的,查询中文 "上海"
http://www.mipang.com/places/place_search_xml.ue?action=Search&q=%E4%B8%8A%E6%B5%B7
结果是
<?xml version="1.0" encoding="UTF-8"?>
<pps version="0.1" code="0"><places><![CDATA[[[6,6],[[2030,'上海','Shanghai','','中国'],[3308,'上海交通大学','SJTU,上海交大','','上海'],[2543,'上海植物园','','','龙吴路'],[3003,'上海理工大学','','','杨浦区'],[2587,'上海野生动物园','','','南汇'],[6530,'旧香港上海银行纪念馆','','','长崎']]]]]></places></pps>

试了几下,最多返回100条结果,因该是数据库作了优化工作,查询很快



看了他网站上用了很多很人性化的Ajax设计,感觉都非常好用
http://www.mipang.com/places/ 页面上 点地图出来的效果很cool,很方便,貌似也作了缓存,点同一个地方没有等待效果。
http://www.mipang.com/places/2030/map 点放大地图也出来一个很酷的效果



注册一下仔细研究了一番,
http://www.mipang.com/blog/post 发文叶面的图文并茂插入也很不错,核心用的应该是FCKeditor。
http://www.mipang.com/photos/upload_v2 照片上传也很人性化,不同于传统的多文件同时递交,他是自动一个个上传的,避免了一次上传多张照片的容量限制,思路不错

感觉是个用心在做的网站,他把Ajax和JS效果都用到了点子上,没有很多网站Ajax滥用的毛病,不错,值得学习。

TOP

共享 支持.一下..

爱在写代码

TOP

fengqibing04422@sina.com
给我一个,谢谢!!!!!!!
雄关漫道真如铁,而今迈步从头越,从头越,苍山如海,残阳如血㊣♀★

TOP

分享...........

TOP

楼主强人啊。
没有没源码或同样的例子呀。能给我发一份吗。感激不尽啊。Email:pucb5@163.com/

没有个性,哪来签名!

TOP

回复 1# 的帖子

向你学习,能不能共享一下
邮箱:danyksj@qq.com
谢谢
Jump for the sun! At least land to the moon!

TOP

给我也发一个:ttplayertt@gmail.com
把手放上来,这段时间不容易,这里只有我们没有我,和你们的兄弟一起,1,2,3!无兄弟,不篮球!

TOP

发新话题