仿Google首页搜索自动补全!(原创分享jQuery版)

简介:

最近学习了一下Ajax,用jQuery做了一些例子,其中觉得仿Google自动补全这个挺帅的。

也是例子里最复杂的一个,后来我又修改了很长时间,尽量模仿的逼真,但是还是没达到预期效果,对汉字,拼音解析都不支持。

对于这方面我也没啥经验,不知道具体该咋弄。所以分享页面源码。希望园子里有用js处理中文自动补全经验的朋友。

可以帮忙分析一下实现,我最近也快期末考试了(电路,离散没怎么听过,要恶补),没有那么多的时间再研究了。所以偷个懒。

仿Google自动补全,实现细节:

后台是简单的servlet(其实就是负责后台处理数据交互的,没必要非跌用个struts...什么的)

传输介质:xml

使用jQuery js框架

功能实现:

如果在缓冲300ms内只输入一个字母,则开始与后台交互。

弹出检索匹配单词的层。可以通过方向键上下选择选项,被选择的高亮显示,颜色和Google的一模一样,并且键盘选择过程

中文本框动态赋值高亮单词,回车提交,ESC隐藏显示层,删除文本框中内容。

被鼠标选择的单词高亮显示,点击鼠标可以替换文本框内容,层自动消失。

backspace键删除后如果文本框不为空再次与服务器交互,检索。

回车提交,鼠标点按钮也可以提交。(最基本的)

xml文件用java提取数据库数据并生成。

基本就这样了。

功能也不复杂,不过这个功能网上的例子比较缺。

struts2里有自动补全的标签,不过如果检索中文还是需要再配置一下,但是这些标签,高度封装了Ajax,

使的我也不懂内部机制(一直没分析源码,也不知道我一天天坐着都忙什么去了,鞭策一下自己吧),而且如果想要修改显示效果

也是非常困难的(封装的太好)。

于是自己就学着做了一个。大家随便看看,指点一下就行。以后会抽空把中文检索,拼音解析加上,真正实现Google的核心效果。

不过现在考试还是第一要务。

其中拼音解析的思路已经有了,不过可能太笨,就是把数据库的中文关键字,用java类(自己实现的)转化成拼音,

然后用字母检索的方法,比较,如果前几个字母一致,返回汉字到页面,不过说着容易,做着麻烦。(现在先不做了)

不耽误看帖人的时间,页面源码:

jQueryAutoComplete.html

ContractedBlock.gif Code

截图:

 


本文转自施杨博客园博客,原文链接:http://www.cnblogs.com/shiyangxt/archive/2008/12/16/jQuery.html,如需转载请自行联系原作者

相关文章
|
7天前
|
存储 程序员 开发工具
git原理图(google搜索git原理图)
Remote仓库存储多位置协作的最新代码,可能与本地仓库不同步。本地仓库保存提交历史,比工作区和暂存区旧。Git commit更新本地仓库,准备git push到远程。Index暂存区记录git add的文件元数据,git status显示状态。Workspace是开发区域,最新内容在此产生。修改从进入index开始受控,提交到本地仓库后永久记录,通过push共享给协作者。
12 2
|
2月前
|
机器学习/深度学习 数据采集 数据可视化
R语言Pearson相关性分析降雨量和“外卖”谷歌搜索热度google trend时间序列数据可视化
R语言Pearson相关性分析降雨量和“外卖”谷歌搜索热度google trend时间序列数据可视化
|
2月前
|
数据可视化 搜索推荐 数据挖掘
R语言Pearson相关性分析就业率和“性别平等”谷歌搜索热度google trend时间序列数据可视化
R语言Pearson相关性分析就业率和“性别平等”谷歌搜索热度google trend时间序列数据可视化
|
2月前
|
JavaScript
多条件搜索(单条件也可以)原生js/jquery
多条件搜索(单条件也可以)原生js/jquery
41 0
|
2月前
如何修改Google首页左下角国家/地区?
如何修改Google首页左下角国家/地区?
|
9月前
|
人工智能 自然语言处理 数据可视化
Google SGE 正在添加人工智能图像生成器,现已推出:从搜索中的生成式 AI 中获取灵感的新方法
Google SGE 正在添加人工智能图像生成器,现已推出:从搜索中的生成式 AI 中获取灵感的新方法
217 1
|
10月前
|
JavaScript
jquery模糊查询--搜索demo效果示例(整理)
jquery模糊查询--搜索demo效果示例(整理)
|
前端开发 JavaScript Python
10 个使用 Google 搜索的小技巧
最近 Twitter 上有一篇介绍 Google 搜索技巧的帖子,觉得非常实用,所以分享给大家,原帖子地址放在文末了。
105 0
10 个使用 Google 搜索的小技巧
|
12月前
|
数据采集 JavaScript 搜索推荐
对于Python抓取Google搜索结果的一些了解
对于Python抓取Google搜索结果的一些了解
|
JavaScript
多条件搜索(单条件也可以)原生js/jquery
多条件搜索(单条件也可以)原生js/jquery
73 0