仿Google首页搜索自动补全
仿Google自动补全，实现细节：
后台是简单的servlet（其实就是负责后台处理数据交互的，没必要非跌用个struts...什么的）
传输介质：xml
使用jQuery js框架
功能实现：
如果在缓冲300ms内只输入一个字母，则开始与后台交互。
弹出检索匹配单词的层。可以通过方向键上下选择选项，被选择的高亮显示，颜色和Google的一模一样，并且键盘选择过程
中文本框动态赋值高亮单词，回车提交，ESC隐藏显示层，删除文本框中内容。
被鼠标选择的单词高亮显示，点击鼠标可以替换文本框内容，层自动消失。
backspace键删除后如果文本框不为空再次与服务器交互，检索。
回车提交，鼠标点按钮也可以提交。（最基本的）
xml文件用java提取数据库数据并生成。
基本就这样了。
功能也不复杂，不过这个功能网上的例子比较缺。
struts2里有自动补全的标签，不过如果检索中文还是需要再配置一下，但是这些标签，高度封装了Ajax，
不耽误看帖人的时间，页面源码：
jQueryAutoComplete.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery 自动完成功能(优化版)</title>
<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
</head>
<body>
<script type="text/javascript">
var highlightindex = -;//表示当前高亮节点
var timeoutId;
$(document).ready(function() {
var wordInput = $("#word");//文本框
var wordInputOffset = wordInput.offset();//获得文本框位置
$("#auto").hide().css("border", "1px black solid").css("position", "absolute")
.css("top", wordInputOffset.top + wordInput.height() + + "px")
.css("left", wordInputOffset.left + "px").width(wordInput.width() + + "px");
wordInput.keyup(function(event) {
//处理文本框中的键盘事件
//如果输入字母，将文本框中最新信息发送给服务器
var myEvent = event || window.event;
var keyCode = myEvent.keyCode;//获得键值 if (keyCode == ) {
var wordText = $("#word").val();
autoHide();
wordInput.text(wordText);
}
else {
if (keyCode >= && keyCode <= || keyCode == || keyCode == ) { //8对应退格键，46对应删除键
var wordText = $("#word").val();//获得文本框中的内容
var autoNode = $("#auto");
if (wordText != "") {
clearTimeout(timeoutId);//对上次未完成的延时操作进行取消
//延时操作，减少与服务器的交互次数，延时500ms，防止用户操作过快
timeoutId = setTimeout(function() {
$.post("AutoCompleteServlet", {word:wordText}, function(data) {//发送数据，第二项是属性名对应属性值
var jqueryObj = $(data);//将dom对象data转换成jQuery的对象
var wordNodes = jqueryObj.find("word");//找到所有word节点
autoNode.html("");
wordNodes.each(function(i) { //i是索引，用来给id赋值
var wordNode = $(this);//获取单词内容
var newDivNode = $("<div>").attr("id", i).css("backgroundColor", "white");
newDivNode.html(wordNode.text()).appendTo(autoNode);//新建div节点，加入单词内容
//增加鼠标进入事件，高亮节点
newDivNode.mouseover(function() {
//将原来高亮的节点取消高亮
if (highlightindex != -) {
$("#auto").children("div").eq(highlightindex)
.css("backgroundColor", "white");
}
//记录新的高亮索引
highlightindex = $(this).attr("id");
$(this).css("backgroundColor", "#3366CC").css("cursor","pointer");
});
//增加鼠标移出事件，取消节点高亮
newDivNode.mouseout(function() {
if (keyCode == ) { //判断是否按下回车键
//下拉框有高亮
if (highlightindex != -) {
lightEventHide();
highlightindex = -;
} else {
alert("文本框中的[" + $("#word").val() + "]被提交了");
autoHide();
$("#word").get().blur();//让文本框失去焦点
}
//取消鼠标移出节点的高亮
//$(this).css("backgroundColor", "white");
}
}
);
//增加鼠标点击事件,可以进行补全
newDivNode.click(function() {
//取出高亮节点的文本内容
var comText = $(this).text();
autoHide();
highlightindex = -;
//文本框内容变为高亮节点内容
$("#word").val(comText);
});
});
//添加单词内容到弹出框
if (wordNodes.length > ) {
autoNode.show();
} else {
autoNode.hide();
highlightindex = -;//弹出框隐藏，高亮节点索引设成-1
}
}, "xml");
}, );
}
else
{
autoNode.hide();
highlightindex = -;
}
} else if (keyCode == || keyCode == ) { //判断是否输入的是向上38向下40按键
if (keyCode == ) {
var autoNodes = $("#auto").children("div").css("background-color", "white");
if (highlightindex != -) {
autoNodes.eq(highlightindex).css("background-color", "white");
highlightindex--;
} else {
lightEvent();
highlightindex = autoNodes.length - ;
}
if (highlightindex == -) {
highlightindex = autoNodes.length - ;//如果改变索引值后index变成-1，则将索引值指向最后一个元素
}
lightEvent();
autoNodes.eq(highlightindex).css("backgroundColor", "#3366CC");
}
if (keyCode == ) {
var autoNodes = $("#auto").children("div");
if (highlightindex != -) {
autoNodes.eq(highlightindex).css("background-color", "white");
}
highlightindex++;
if (highlightindex == autoNodes.length) {
highlightindex = ;//如果改变索引值等于最大长度，则将索引值指向第一个元素 }
lightEvent();
autoNodes.eq(highlightindex).css("backgroundColor", "#3366CC");
}
} else if (keyCode == ) { //判断是否按下回车键
//下拉框有高亮
if (highlightindex != -) {
lightEventHide();
highlightindex = -;
} else {
alert("文本框中的[" + $("#word").val() + "]被提交了");
$("#auto").hide();
$("#word").get().blur();//让文本框失去焦点
}
//下拉框没有高亮
}
}
}
)
;
$("input[type='button']").click(function() {
alert("文本框中的[" + $("#word").val() + "]被提交了");
});
});
function lightEventHide(){
var comText = $("#auto").hide().children("div").eq(highlightindex).text();
$("#word").val(comText);
}
function lightEvent(){
var comText = $("#auto").children("div").eq(highlightindex).text();
$("#word").val(comText);
}
function autoHide(){
$("#auto").hide();
}
</script> <h3>
<center>施杨 仿google自动补全(jQuery优化版)</center>
</h3>
<br />
<table align="center">
<tr><td>
<input type="text" id="word" maxlength= size= />
<br/>
<td></tr>
<tr><td align="center">
<input type="button" value="shiyang 搜索"/>
</td></tr>
</table>
<br />
<div id="auto"></div>
</body>
</html>
截图：
自动补全(仿百度搜索框)
输入：a或b或c 即可看到效果
<!doctype html>
<html>
<style>
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
.auto_hidden {
width:204px;border-top: 1px solid #;
border-bottom: 1px solid #;
border-left: 1px solid #;
border-right: 1px solid #;
position:absolute;
display:none;
}
.auto_show {
width:204px;
border-top: 1px solid #;
border-bottom: 1px solid #;
border-left: 1px solid #;
border-right: 1px solid #;
position:absolute;
z-index:; /* 设置对象的层叠顺序 */
display:block;
}
.auto_onmouseover{
color:#ffffff;
background-color:highlight;
width:%;
}
.auto_onmouseout{
color:#;
width:%;
background-color:#ffffff;
}
</style>
<script language="javascript">
<!--
/*
通用: 自动补全(仿百度搜索框)
作者：nj-troy
时间：2010-11-101
*/
var $ = function (id) {
return "string" == typeof id ? document.getElementById(id) : id;
}
var Bind = function(object, fun) {
return function() {
return fun.apply(object, arguments);
}
}
function AutoComplete(obj,autoObj,arr){
this.obj=$(obj); //输入框
this.autoObj=$(autoObj);//DIV的根节点
this.value_arr=arr; //不要包含重复值
this.index=-; //当前选中的DIV的索引
this.search_value=""; //保存当前搜索的字符
}
AutoComplete.prototype={
//初始化DIV的位置
init: function(){
this.autoObj.style.left = this.obj.offsetLeft + "px";
this.autoObj.style.top = this.obj.offsetTop + this.obj.offsetHeight + "px";
this.autoObj.style.width= this.obj.offsetWidth - + "px";//减去边框的长度2px
},
//删除自动完成需要的所有DIV
deleteDIV: function(){
while(this.autoObj.hasChildNodes()){
this.autoObj.removeChild(this.autoObj.firstChild);
}
this.autoObj.className="auto_hidden";
},
//设置值
setValue: function(_this){
return function(){
_this.obj.value=this.seq;
_this.autoObj.className="auto_hidden";
}
},
//模拟鼠标移动至DIV时，DIV高亮
autoOnmouseover: function(_this,_div_index){
return function(){
_this.index=_div_index;
var length = _this.autoObj.children.length;
for(var j=;j<length;j++){
if(j!=_this.index ){
_this.autoObj.childNodes[j].className='auto_onmouseout';
}else{
_this.autoObj.childNodes[j].className='auto_onmouseover';
}
}
}
},
//更改classname
changeClassname: function(length){
for(var i=;i<length;i++){
if(i!=this.index ){
this.autoObj.childNodes[i].className='auto_onmouseout';
}else{
this.autoObj.childNodes[i].className='auto_onmouseover';
this.obj.value=this.autoObj.childNodes[i].seq;
}
}
}
,
//响应键盘
pressKey: function(event){
var length = this.autoObj.children.length;
//光标键"↓"
if(event.keyCode==){
++this.index;
if(this.index>length){
this.index=;
}else if(this.index==length){
this.obj.value=this.search_value;
}
this.changeClassname(length);
}
//光标键"↑"
else if(event.keyCode==){
this.index--;
if(this.index<-){
this.index=length - ;
}else if(this.index==-){
this.obj.value=this.search_value;
}
this.changeClassname(length);
}
//回车键
else if(event.keyCode==){
this.autoObj.className="auto_hidden";
this.index=-;
}else{
this.index=-;
}
},
//程序入口
start: function(event){
if(event.keyCode!=&&event.keyCode!=&&event.keyCode!=){
this.init();
this.deleteDIV();
this.search_value=this.obj.value;
var valueArr=this.value_arr;
valueArr.sort();
if(this.obj.value.replace(/(^\s*)|(\s*$)/g,'')==""){ return; }//值为空，退出
try{ var reg = new RegExp("(" + this.obj.value + ")","i");}
catch (e){ return; }
var div_index=;//记录创建的DIV的索引
for(var i=;i<valueArr.length;i++){
if(reg.test(valueArr[i])){
var div = document.createElement("div");
div.className="auto_onmouseout";
div.seq=valueArr[i];
div.onclick=this.setValue(this);
div.onmouseover=this.autoOnmouseover(this,div_index);
div.innerHTML=valueArr[i].replace(reg,"<strong>$1</strong>");//搜索到的字符粗体显示
this.autoObj.appendChild(div);
this.autoObj.className="auto_show";
div_index++;
}
}
}
this.pressKey(event);
window.onresize=Bind(this,function(){this.init();});
}
}
//-->
</script>
<body>
<h1 align="center">自动完成函数(Autocomplete Function)</h1>
<div align="center"><input type="text" style="width:300px;height:20px;font-size:14pt;" id="o" onkeyup="autoComplete.start(event)"></div>
<div class="auto_hidden" id="auto"><!--自动完成 DIV--></div>
<script>
var autoComplete=new AutoComplete('o','auto',['b0','b12','b22','b3','b4','b5','b6','b7','b8','b2','abd','ab','acd','accd','b1','cd','ccd','cbcv','cxf']);
</script>
</body>
</html>
仿Google首页搜索自动补全的更多相关文章
- [LeetCode] Design Search Autocomplete System 设计搜索自动补全系统
Design a search autocomplete system for a search engine. Users may input a sentence (at least one wo ...
- [LeetCode] 642. Design Search Autocomplete System 设计搜索自动补全系统
Design a search autocomplete system for a search engine. Users may input a sentence (at least one wo ...
- StringBoot整合ELK实现日志收集和搜索自动补全功能(详细图文教程)
@ 目录 StringBoot整合ELK实现日志收集和搜索自动补全功能(详细图文教程) 一.下载ELK的安装包上传并解压 1.Elasticsearch下载 2.Logstash下载 3.Kibana ...
- jquery input 搜索自动补全、typeahead.js
最近做个一个功能需要用到自动补全,然后在网上找了很久,踩了各种的坑 最后用typeahead.js这个插件,经过自己的测试完美实现 使用方法:在页面中引入jquery.jquery.typeahead ...
- 第三百六十八节，Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)用Django实现搜索的自动补全功能
第三百六十八节,Python分布式爬虫打造搜索引擎Scrapy精讲—用Django实现搜索的自动补全功能 elasticsearch(搜索引擎)提供了自动补全接口 官方说明:https://www.e ...
- 利用redis完成自动补全搜索功能（一）
最近要做一个搜索自动补全的功能(目前只要求做最前匹配),自动补全就是自动提示,类似于搜索引擎,再上面输入一个字符,下面会提示多个关键词供参考,比如你输入 nb 2字符, 会自动提示nba,nba录像, ...
- 四十七 Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)用Django实现搜索的自动补全功能
elasticsearch(搜索引擎)提供了自动补全接口 官方说明:https://www.elastic.co/guide/en/elasticsearch/reference/current/se ...
- autocomplete实现联想输入，自动补全
jQuery.AutoComplete是一个基于jQuery的自动补全插件.借助于jQuery优秀的跨浏览器特性,可以兼容Chrome/IE/Firefox/Opera/Safari等多种浏览器. 特 ...
- bigautocomplete实现联想输入，自动补全
bigautocomplete是一款Jquery插件.用它实现仿搜索引擎文本框自动补全插件功能很实用,使用也很简单,引入了插件之后写几行代码就可以实现,可以灵活设置. 先看效果图: 上图是通过ajax ...
随机推荐
- poj 1604 Just the Facts
/** 大意: 求n! 结果 从左到右 第一个非零数 跟 1150 差不多.. **/ #include <iostream> #include <cstdio> using ...
- NET Core 环境搭建和命令行CLI入门
NET Core 环境搭建和命令行CLI入门 2016年6月27日.NET Core & ASP.NET Core 1.0在Redhat峰会上正式发布,社区里涌现了很多文章,我也计划写个系列文 ...
- 看看微软代码的水平——Windows Live Writer 完成开源并推出开源分支
http://www.oschina.net/news/68860/windows-live-writer-opensource
- 字符串操作函数<string.h>相关函数strcpy,strcat,等源码。
首先说一下源码到底在哪里找. 我们在文件中包含<cstring>时,如果点击右键打开文档, 会打开cstring,我们会发现路径为: D:\Program Files\visual stu ...
- php 判断是否登录
<?php // 本类由系统自动生成,仅供测试用途 class IndexAction extends Action { public function _before_index(){ //做 ...
- Java学习之IO之File类二
之前学了File便想把我学习视频的名字改了,因为文件名太长不好看,便试着写了个功能实现 package com.gh.file; import java.io.File; /** * 批量文件命名 * ...
- NAT简单介绍
NAT本质就是让一群机器公用同一个IP.还有一个重要的用途是保护NAT内的主机不受外界攻击 NAT类型: 1.Full Cone:IPport不受限 Full Cone仅仅做单纯的地址转换,不正确进出 ...
- 【Oracle】ORA-06550 PLS-00201
ORA-06550 第1行,第7页 PLS-00201 必须声明标识符“PROC_****” 改错了首先检查连接的数据库库里面有没有这个存储过程.(检查是否配置对了数据库)
- IAR之工程配置
参考 : IAR的Workspace顶部下拉菜单中Debug和Release http://blog.csdn.net/yanpingsz/article/details/5588525 ++++++ ...
- Java Pattern Matcher 正则应用
转自:http://www.itzhai.com/java-notes-regex-matches-and-lookingat.html#read-more 1.基本语法 2.String内建的正则表 ...