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

ming206

来　自：重庆
等　级：等待验证会员
威　望：3
帖　子：545
专家分：7
注　册：2005-8-2

第 32 楼

得分:0

人呢？发给我份啊。

外贸综合平台：E贸通

2007-05-31 21:15

xiaopiao

等　级：新手上路
帖　子：2
专家分：0
注　册：2007-6-1

第 34 楼

得分:0

回复：（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滥用的毛病，不错，值得学习。

2007-06-01 18:17