注册 登录
编程论坛 jQuery论坛

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

nukq 发布于 2006-07-03 13:09, 27905 次点击
参考了Gmail中的实现思路,优化了数据存储,自动匹配速度很快

支持IE6/IE7、FireFox, Opera效果不是很好但基本可用。
Safari还没有测试过。


这里有几个截图:





演示地址:
[url]http://www.mipang.com/tmp/psi_demo.ue[/url]

使用帮助:
[url]http://www.mipang.com/help/faq.ue#psi[/url]
62 回复
#2
btb3682006-07-31 09:01
哈哈,做的不错,可以共享一下源代码吗?我的邮箱是zzuli_cs@
#3
hangxj2006-08-07 11:09
94 楼上的兄弟共享一下你的代码吧?
大家学习一下嘛
#4
beiluka2006-09-10 18:10

我也想要学习下
beiluka1127@163.com

#5
━╋网情深★2006-09-19 12:14
强.........
#6
hangxj2006-10-09 09:41
没有分享的?
#7
渚薰2006-10-09 12:48
类似于Google Suggest,呵呵,楼主还是不错的,不知道楼主有没有注意关键字模糊搜索的细节,如果这点也考虑到了,那真的很不错了
#8
tianlei2006-10-11 11:07
有这个东东的源代码吗 给我看下吧
csarp@163.com
十分感谢
#9
dzt00012006-10-14 18:25
学习
#10
nukq2006-10-14 21:14
以下是引用渚薰在2006-10-9 12:48:28的发言:
类似于Google Suggest,呵呵,楼主还是不错的,不知道楼主有没有注意关键字模糊搜索的细节,如果这点也考虑到了,那真的很不错了

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

#11
hangxj2006-10-16 14:44

楼主可以分享一下代码?

#12
nukq2006-10-16 18:58
以下是引用hangxj在2006-10-16 14:44:50的发言:

楼主可以分享一下代码?

没做过代码混淆

#13
hangxj2006-10-18 13:49

#14
labid2006-10-19 17:48
我也想要````原代码,大哥给我发个``````````
labid@sohu.com
谢谢``````````````````
#15
adun2006-11-09 16:12

做广告

#16
limaoyuan2006-11-18 16:29
分享下吧,我也想要源代码

lmy0921@163.com
#17
pmbdlw2006-11-28 00:47
我也想要!pmbdlw@126.com
#18
kyoshingo2006-11-30 14:09

能不能发个源代码啊

#19
kyoshingo2006-11-30 14:09
mail:kyoshingo2939@
#20
梦幻情缘2006-11-30 19:37
hanyonglu@126.com 我的邮箱,也让咱看一看。
#21
heisede9112006-12-13 09:01

斑竹很牛啊,能不能分享一下啊!!!
邮箱 heisede911@163.com 谢谢了

#22
支离破碎2007-03-14 10:21
有无源码?发一份,thanks.

flash7758@163.com
#23
google2007-03-14 15:02
我做了个类似的
基于ASP+ACCESS的
http://www.no1edu.com/test/index.html
功能还在完善中
下载地址:
http://www.no1edu.com/download/atest.rar



#24
hangxj2007-03-28 15:47
还是google好,愿意分享~~
#25
followmephoe2007-03-31 11:37

这个征服AJAX这个书上有,想要源码的人可以去买那本书看,里面有很多AJAX的例子

#26
yangjun2007-04-20 08:53

做的不错,我也想借鉴一下大侠的,我的邮箱地址:yangjunxyzabcd@163.com,谢谢了哦!

#27
编程之星2007-04-26 13:00
我也早就写了一个类似功能的程序,是用DHTML结合JAVASCRIPT来写的.
只不过还没有结合Ajax和数据库.大家需要的话,以后我会在网上公开源代码.
#28
sfzheng20072007-04-26 14:30
楼主 也发我一份 让我研究研究 sfzheng.ok@163.com
#29
luke9112007-04-26 15:55
LZ也给我发个啊lukgzp@yahoo.com.cn
#30
mqian2007-05-16 09:19
分享下吧,我也想要源代码
michael_qianzj@yahoo.com.cn
#31
enlangs2007-05-29 22:11
以下是引用nukq在2006-10-14 21:14:06的发言:

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

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

#32
ming2062007-05-31 21:15

人呢?发给我份啊。

#33
xiaopiao2007-06-01 17:34
回复:(ming206)人呢?发给我份啊。
好像没有加密阿,可以看源代码的
#34
xiaopiao2007-06-01 18:17
回复:(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滥用的毛病,不错,值得学习。

#35
爱无限2007-06-05 17:16

共享 支持.一下..

#36
fqbnet20082007-06-18 14:32
fengqibing04422@sina.com
给我一个,谢谢!!!!!!!
#37
alxw46162007-06-25 20:16
分享...........
#38
pucb2007-10-09 19:08

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

#39
danyksj2007-12-01 13:01
回复 1# 的帖子
向你学习,能不能共享一下
邮箱:danyksj@
谢谢
#40
gongbing2007-12-19 17:38
给我也发一个:[email]ttplayertt@[/email]
#41
prayer2007-12-21 20:49
楼主 把源代码共享一下 大家一起研究 肯定能修改完美
#42
destiny_my2007-12-27 16:12
不错.这里的人技术真的很强
#43
ts882008-03-03 19:49
我的wstsj@
#44
beniao2008-03-18 01:58
beniao123@
 可以借鉴学习下吗?
#45
lodhppve2008-03-18 15:42
大哥,给我也来一份这个源码吧! 谢谢、我需要急用。expectxuehai@
#46
stusoso2008-04-03 10:59
希望LZ给个源代码看看,我最近也在学这方面。如果LZ愿意的话,希望给个完整版的,谢谢了!
#47
stusoso2008-04-03 11:00
我的邮箱是panlb@
#48
follow1102008-06-17 21:51
可以发我一份吗?我的E-mail是luojianhui110@ 谢谢
#49
xiaosongjun2008-06-18 18:19
楼主蛮强的啊
 ......
#50
jack_king2008-06-21 14:05
楼主能把你的代码公开,让我学习学习吗?
我的油箱是dis_hell@
#51
cb200807202008-07-20 15:52
纯粹以做广告的,鄙视!
12