搜索自动提示的简单模拟JQuery
使用jQuery实现类似于百度搜索时的自动完成功能，界面效果 所示。
首先在输入框上注册keyup事件，然后在事件中通过AJAX获取JSON对象。取得数据后，每一项数据创建一个li标签，在标签上注册click事件，这样当我们点击每一项的时候，就可以响应事件。键盘导航的关键是记录当前高亮的索引值，根据索引值来调整背景高亮。显示下拉列表的位置要根据输入框的位置来设置，当浏览器的大小改变时，随时调整下拉列表的位置。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>搜索词自动完成</title> <style type="text/css">
#search {
text-align: center;
position: relative;
}
.autocomplete {
border: 1px solid #9ACCFB;
background-color: white;
text-align: left;
}
.autocomplete li {
list-style-type: none;
}
.clickable {
cursor: default;
}
.highlight {
background-color: #9ACCFB;
}
</style>
<script type="text/javascript" src="js/jquery-1.11.1.js">
</script>
<script type="text/javascript">
$(function() {
//取得div层
var $search = $('#search');
//取得输入框JQuery对象
var $searchInput = $search.find('#search-text');
//关闭浏览器提供给输入框的自动完成
$searchInput.attr('autocomplete', 'off');
//创建自动完成的下拉列表，用于显示服务器返回的数据,插入在搜索按钮的后面，等显示的时候再调整位置
var $autocomplete = $('<div class="autocomplete"></div>').hide()
.insertAfter('#submit'); //清空下拉列表的内容并且隐藏下拉列表区
var clear = function() {
$autocomplete.empty().hide();
};
//注册事件，当输入框失去焦点的时候清空下拉列表并隐藏
$searchInput.blur(function() {
setTimeout(clear, 500);
}); //下拉列表中高亮的项目的索引，当显示下拉列表项的时候，移动鼠标或者键盘的上下键就会移动高亮的项目，像百度搜索那样
var selectedItem = null;
//timeout的ID
var timeoutid = null;
//设置下拉项的高亮背景
var setSelectedItem = function(item) {
//更新索引变量
selectedItem = item;
//按上下键是循环显示的，小于0就置成最大的值，大于最大值就置成0
if (selectedItem < 0) {
selectedItem = $autocomplete.find('li').length - 1;
} else if (selectedItem > $autocomplete.find('li').length - 1) {
selectedItem = 0;
}
//首先移除其他列表项的高亮背景，然后再高亮当前索引的背景
$autocomplete.find('li').removeClass('highlight').eq(selectedItem)
.addClass('highlight');
};
var ajax_request = function() {
//ajax服务端通信
$.ajax( {
'url' : 'search.do', //服务器的地址
'data' : {
'search-text' : $searchInput.val()
}, //参数
'dataType' : 'json', //返回数据类型
'type' : 'POST', //请求类型
'success' : function(data) {
if (data.length) {
//遍历data，添加到自动完成区
$.each(data, function(index, term) {
//创建li标签,添加到下拉列表中
$('<li></li>').text(term).appendTo($autocomplete).addClass(
'clickable').hover(function() {
//下拉列表每一项的事件，鼠标移进去的操作
$(this).siblings().removeClass('highlight');
$(this).addClass('highlight');
selectedItem = index;
}, function() {
//下拉列表每一项的事件，鼠标离开的操作
$(this).removeClass('highlight');
//当鼠标离开时索引置-1，当作标记
selectedItem = -1;
}).click(function() {
//鼠标单击下拉列表的这一项的话，就将这一项的值添加到输入框中
$searchInput.val(term);
//清空并隐藏下拉列表
$autocomplete.empty().hide();
});
});//事件注册完毕
//设置下拉列表的位置，然后显示下拉列表
var ypos = $searchInput.position().top;
var xpos = $searchInput.position().left;
$autocomplete.css('width', $searchInput.css('width'));
$autocomplete.css( {
'position' : 'relative',
'left' : xpos + "px",
'top' : ypos + "px"
});
setSelectedItem(0);
//显示下拉列表
$autocomplete.show();
}
}
});
};
//对输入框进行事件注册
$searchInput
.keyup(function(event) {
//字母数字，退格，空格
if (event.keyCode > 40 || event.keyCode == 8
|| event.keyCode == 32) {
//首先删除下拉列表中的信息
$autocomplete.empty().hide();
clearTimeout(timeoutid);
timeoutid = setTimeout(ajax_request, 100);
} else if (event.keyCode == 38) {
//上
//selectedItem = -1 代表鼠标离开
if (selectedItem == -1) {
setSelectedItem($autocomplete.find('li').length - 1);
} else {
//索引减1
setSelectedItem(selectedItem - 1);
}
event.preventDefault();
} else if (event.keyCode == 40) {
//下
//selectedItem = -1 代表鼠标离开
if (selectedItem == -1) {
setSelectedItem(0);
} else {
//索引加1
setSelectedItem(selectedItem + 1);
}
event.preventDefault();
}
}).keypress(function(event) {
//enter键
if (event.keyCode == 13) {
//列表为空或者鼠标离开导致当前没有索引值
if ($autocomplete.find('li').length == 0
|| selectedItem == -1) {
return;
}
$searchInput.val($autocomplete.find('li').eq(
selectedItem).text());
$autocomplete.empty().hide();
event.preventDefault();
}
}).keydown(function(event) {
//esc键
if (event.keyCode == 27) {
$autocomplete.empty().hide();
event.preventDefault();
}
});
//注册窗口大小改变的事件，重新调整下拉列表的位置
$(window).resize(function() {
var ypos = $searchInput.position().top;
var xpos = $searchInput.position().left;
$autocomplete.css('width', $searchInput.css('width'));
$autocomplete.css( {
'position' : 'relative',
'left' : xpos + "px",
'top' : ypos + "px"
});
});
});
</script>
</head>
<body>
<div id="search">
<label for="search-text">
请输入关键词
</label>
<input type="text" id="search-text" name="search-text" />
<input type="button" id="submit" value="搜索" />
</div>
</body>
</html>
baidu.html
public class ActionServlet extends HttpServlet {
public void service(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
String uri = request.getRequestURI();
String action = uri.substring(uri.lastIndexOf("/"), uri
.lastIndexOf("."));
if (action.equals("/search")) {
String[] words = { "amani", "abc", "apple", "abstract", "an",
"bike", "byebye", "beat", "be", "bing", "come", "cup",
"class", "calendar", "china" };
if (request.getParameter("search-text") != null) {
String key = request.getParameter("search-text");
if (key.length() != 0) {
String json = "[";
for (int i = 0; i < words.length; i++) {
if (words[i].startsWith(key)) {
json += "\"" + words[i] + "\"" + ",";
}
}
json = json.substring(0, json.length() - 1 > 0 ? json
.length() - 1 : 1);
json += "]";
System.out.println("json:" + json);
out.println(json);
}
}
}
out.close();
}
}
servlet
搜索自动提示的简单模拟JQuery的更多相关文章
- 【搜索引擎】 PostgreSQL 10 实时全文检索和分词、相似搜索、模糊匹配实现类似Google搜索自动提示
需求分析 要通过PostgreSQL实现类似Google搜索自动提示的功能,例如要实现一个查询海量数据中的商品名字,每次输入就提示用户各种相关搜索选项,例如淘宝.京东等电商查询 思路 这个功能可以用 ...
- Springboot+Vue实现仿百度搜索自动提示框匹配查询功能
案例功能效果图 前端初始页面 输入搜索信息页面 点击查询结果页面 环境介绍 前端:vue 后端:springboot jdk:1.8及以上 数据库:mysql 核心代码介绍 TypeCtrler .j ...
- **IOS自动完成(搜索自动提示)功能实现
UISearchBar搜索AutoComplete下拉列表搜索提示 http://www.codeios.com/thread-10685-1-1.html 介绍: 在搜索框上加入下拉列表.在 ...
- Android搜索自动提示功能 AutocompleteTextView
1.配置main.xml中自动提示控件: <AutoCompleteTextView android:id="@+id/autotv_searchresult" androi ...
- jquery ui autocomplete 模拟百度搜索自动提示
直接上代码 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=" ...
- 让你的MyEclipse具有jquery自动提示
想让你的MyEclipse支持Jquery的自动提示更简单一些,照下图完成即可: 照上面图示已经完成了Jquery自动提示的配置,此时spket已经有两种AJAX库的自动提示,通过右边的De ...
- 如何在myeclipse中实现jquery的自动提示功能
在web开发过程中,myeclipse中jsp可以实现自动提示功能,但是jquery代码却无法实现自动提示,需要自己一个个手动去输入,效率过低,怎么办? 工具/原料 jquery 1.8.3.js ...
- jquery+php实现用户输入搜索内容时自动提示
index.html <html> <head> <meta charset=;} #search_auto li a:hover{background:#D8D ...
- Jquery 搜索框自动提示
为文本框增加自动提示下拉功能,比如输入 1,则从后台数据库查询出包含1 的字段,在文本框增加下拉列表供用户选择 ajax 返回数据为搜索查询字段的json集合 <script src=" ...
随机推荐
- (转)Saltstack系列
Saltstack系列1:安装配置 Saltstack系列2:Saltstack远程执行命令 Saltstack系列3:Saltstack常用模块及API Saltstack系列4:Saltstack ...
- 前端性能优化之优化图片 && 优化显示图片
前端图片优化一直以来都是热门话题,从需求上来看,很多站点往往是图片体积大于代码体积, 图片请求多余代码文件请求, 给前端的性能带来了很大的困扰,那么应该如何解决呢? 零. 认识图片 我们通常使用的图片 ...
- sudo apt-get install openssh-server时提示需要安装1:6.6p1-2ubuntu1的解决办法（图文详解）
最近,在执行 sudo apt-get install openssh-server 提示,如下. 解决办法 先要执行 sudo apt-get install openssh-client=1:6. ...
- Hadoop升级
1.停止所有MR任务 stop-mapred.sh 2.检查HDFS hadoop fsck / -files -blocks -locations > dfs-v-old-fsck-.log ...
- 队列同步器AbstractQueuedSynchronizer
AQS是用来构建锁或者其它同步组件的基础框架,它使用一个int变量来表示同步状态,通过内置的FIFO队列来完成获取线程的排队工作,concurrent包的作者Doug Lea期望它能称为实现大部分同步 ...
- Task的一些用法总结
一.Task和多线程以及异常的捕获示例代码: static void Main(string[] args) { // 产生CancellationToken的类,该类允许使用Cancel方法终止线程 ...
- 九度oj题目1385：重建二叉树
题目1385:重建二叉树 时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:4419 解决:1311 题目描述: 输入某二叉树的前序遍历和中序遍历的结果,请重建出该二叉树.假设输入的前序遍历和 ...
- 理解Windows注册表
理解Windows注册表 注意 完之前先备份reg 前言 在Windows 3.x之前, Windows都是使用.ini文件来保存配置信息的, 但是.ini文件的大小最大只能为64KB, 为了突破这个 ...
- 【linux相识相知】网络属性配置
当我们拥有一个崭新的计算机的时候,第一步恐怕都是迫不及待的下载各种软件,看视频,听音乐等,这里的关键的一点是要有网络.现在的个人计算机大部分都是windows操作系统的,接入网络网络很简单,插上网线也 ...
- HTML标签 链接 随笔3
4-1 <a>标签 网页链接 使用<a>标签可实现超链接,它在网页制作中可以说是无处不在,只要有链接的地方,就会有这个标签. 语法: <a href="目标网 ...