jquery的输入框自动补全功能+ajax
内容参考网友文章写成，原博的链接找不到了，但是感谢分享！
效果图：
涉及到ajax请求我这里本地请求不到数据就先放测试代码，在文章的最后会放上ajax代码：
用来测试的代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>jquery自动补全+ajax</title>
<style>
body{font-size:12px;}
*{margin:0;padding:0;}
#searchBox{position:relative;margin:100px auto;width:200px;}
/*补全框*/
.autocomplete{background:#fff;border:1px solid #efefef;list-style-type:none;}
.autocomplete li{height:20px;line-height:20px;border-bottom:1px solid #efefef;cursor:default;}
.highlight {background-color: #9ACCFB;}
#registerCity{outline:none;width:100%;}
</style>
</head>
<body>
<div id="searchBox">
<input type="text" id="registerCity" autocomplete="off" value=""/>
</div>
<script src="assets/js/jquery-2.0.3.min.js"></script>
<script>
//-------注册地自动补全开始----------------------------------
var registerCity=$("#registerCity");
//创建自动完成的下拉列表，用于显示服务器返回的数据，插入在输入框后面，然后调整位置
var autocomplete=$('<ul class="autocomplete"></ul>').hide().appendTo("#searchBox");
//清空下拉列表的内容并且隐藏下拉列表
var clear= function () {
autocomplete.empty().hide();
};
//注册事件，当输入框失去焦点的时候清空下拉列表并隐藏
registerCity.blur(function () {
setTimeout(clear,500);
});
//下拉列表中高亮的项目的索引，当显示下拉列表项的时候，移动鼠标或者键盘的下键就会移动高亮的项目
var selectedItem=null;
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:"/car/info/seach/city/first",
// contentType:"application/x-www-form-urlencoded:charset=UTF-8",
// type:"get",
// dataType:"json",
// data:{"reg_city":$("#registerCity").val()},
// success: function (data) {
// var cityArr=data.city;
var cityArr=["大壳宝","大壳美","大壳棒棒哒","厉害了我的壳"];
//如果有数据
if(cityArr.length>0){
$.each(cityArr, 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");
selectedItem=-1;
}).click(function () {
//鼠标单击下拉列表的这一项的话，就将这一项的值添加到输入框中
registerCity.val(term);
//清空并隐藏下拉列表
autocomplete.empty().hide();
});
});//事件注册完毕
//设置下拉列表的位置，然后显示下拉列表
var ypos=registerCity.height()+4;
var xpos=registerCity.position().left;
autocomplete.css('width',registerCity.css('width'));
autocomplete.css({'position':'absolute','left':xpos+'px','top':ypos+'px',"z-index":"100"});
setSelectedItem(0);
//显示下拉列表
autocomplete.show();
}
// }
// });
};
//对输入框进行事件注册
registerCity.keyup(function (e) {
//字母数字、退格、空格
if(e.keyCode > 40 || e.keyCode == 8 || e.keyCode ==32){
//首先删除下拉列表中的信息
autocomplete.empty().hide();
clearTimeout(timeoutId);
timeoutId=setTimeout(ajax_request,100);
}else if(e.keyCode==38){
//上
//selectedItem=-1代表鼠标离开
if(selectedItem==-1){
setSelectedItem(autocomplete.find("li").length-1);
}else{
//索引减1
setSelectedItem(selectedItem-1);
}
e.preventDefault();
}else if(e.keyCode==40){
//下
if(selectedItem==-1){
setSelectedItem(0);
}else{
setSelectedItem(selectedItem+1);
}
e.preventDefault();
}
}).keypress(function (e) {
//enter回车键
if(e.keyCode==13){
//列表为空或者鼠标离开导致当前没有索引值
if(autocomplete.find("li").length==0||selectedItem==-1){
return;
}
registerCity.val(autocomplete.find("li").eq(selectedItem).text());
autocomplete.empty().hide();
e.preventDefault();
}
}).keydown(function (e) {
//esc后退
if(e.keyCode==27){
autocomplete.empty().hide();
e.preventDefault();
}
});
//------注册地自动补全结束----------------------------
</script>
</body>
</html>
正式的用ajax实现的代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>jquery自动补全+ajax</title>
<style>
body{font-size:12px;}
*{margin:0;padding:0;}
#searchBox{position:relative;margin:100px auto;width:200px;}
/*补全框*/
.autocomplete{background:#fff;border:1px solid #efefef;list-style-type:none;}
.autocomplete li{height:20px;line-height:20px;border-bottom:1px solid #efefef;cursor:default;}
.highlight {background-color: #9ACCFB;}
#registerCity{outline:none;width:100%;}
</style>
</head>
<body>
<div id="searchBox">
<input type="text" id="registerCity" autocomplete="off" value=""/>
</div>
<script src="assets/js/jquery-2.0.3.min.js"></script>
<script>
//-------注册地自动补全开始----------------------------------
var registerCity=$("#registerCity");
//创建自动完成的下拉列表，用于显示服务器返回的数据，插入在输入框后面，然后调整位置
var autocomplete=$('<ul class="autocomplete"></ul>').hide().appendTo("#searchBox");
//清空下拉列表的内容并且隐藏下拉列表
var clear= function () {
autocomplete.empty().hide();
};
//注册事件，当输入框失去焦点的时候清空下拉列表并隐藏
registerCity.blur(function () {
setTimeout(clear,500);
});
//下拉列表中高亮的项目的索引，当显示下拉列表项的时候，移动鼠标或者键盘的下键就会移动高亮的项目
var selectedItem=null;
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:"/car/info/seach/city/first",
contentType:"application/x-www-form-urlencoded:charset=UTF-8",
type:"get",
dataType:"json",
data:{"reg_city":$("#registerCity").val()},
success: function (data) {
var cityArr=data.city;
// var cityArr=["大壳宝","大壳美","大壳棒棒哒","厉害了我的壳"];
//如果有数据
if(cityArr.length>0){
$.each(cityArr, 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");
selectedItem=-1;
}).click(function () {
//鼠标单击下拉列表的这一项的话，就将这一项的值添加到输入框中
registerCity.val(term);
//清空并隐藏下拉列表
autocomplete.empty().hide();
});
});//事件注册完毕
//设置下拉列表的位置，然后显示下拉列表
var ypos=registerCity.height()+4;
var xpos=registerCity.position().left;
autocomplete.css('width',registerCity.css('width'));
autocomplete.css({'position':'absolute','left':xpos+'px','top':ypos+'px',"z-index":"100"});
setSelectedItem(0);
//显示下拉列表
autocomplete.show();
}
}
});
};
//对输入框进行事件注册
registerCity.keyup(function (e) {
//字母数字、退格、空格
if(e.keyCode > 40 || e.keyCode == 8 || e.keyCode ==32){
//首先删除下拉列表中的信息
autocomplete.empty().hide();
clearTimeout(timeoutId);
timeoutId=setTimeout(ajax_request,100);
}else if(e.keyCode==38){
//上
//selectedItem=-1代表鼠标离开
if(selectedItem==-1){
setSelectedItem(autocomplete.find("li").length-1);
}else{
//索引减1
setSelectedItem(selectedItem-1);
}
e.preventDefault();
}else if(e.keyCode==40){
//下
if(selectedItem==-1){
setSelectedItem(0);
}else{
setSelectedItem(selectedItem+1);
}
e.preventDefault();
}
}).keypress(function (e) {
//enter回车键
if(e.keyCode==13){
//列表为空或者鼠标离开导致当前没有索引值
if(autocomplete.find("li").length==0||selectedItem==-1){
return;
}
registerCity.val(autocomplete.find("li").eq(selectedItem).text());
autocomplete.empty().hide();
e.preventDefault();
}
}).keydown(function (e) {
//esc后退
if(e.keyCode==27){
autocomplete.empty().hide();
e.preventDefault();
}
});
//------注册地自动补全结束----------------------------
</script>
</body>
</html>
jquery的输入框自动补全功能+ajax的更多相关文章
- jQuery搜索框自动补全功能插件实现-autocomplete.js
最近用nodeclub实现股票的输入关键字自动补全股票信息进行搜索功能,原先用jQuery-ui,结果jQuery-ui库太大,所以考虑用其他插件,最终选择使用autocomplete.js,控件简单 ...
- 第三百六十八节，Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)用Django实现搜索的自动补全功能
第三百六十八节,Python分布式爬虫打造搜索引擎Scrapy精讲—用Django实现搜索的自动补全功能 elasticsearch(搜索引擎)提供了自动补全接口 官方说明:https://www.e ...
- 四十七 Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)用Django实现搜索的自动补全功能
elasticsearch(搜索引擎)提供了自动补全接口 官方说明:https://www.elastic.co/guide/en/elasticsearch/reference/current/se ...
- javascript 实现类似百度联想输入，自动补全功能
js 实现类似百度联想输入,自动补全功能 方案一: search是搜索框id="search" //点击页面隐藏自动补全提示框 document.onclick = functi ...
- gocode+auto-complete搭建emacs的go语言自动补全功能
上篇随笔记录了在emacs中使用go-mode和goflymake搭建了go语言的简单编程环境(推送门),今天来记录一下使用gocode+auto-complete配置emacs中go语言的自动补全功 ...
- notepad++代码自动补全功能
可以代码自动补全功能,默认他是没有开启这个功能的,在首选项->备份与自动完成 里面有自动完成这一个设置,可以设置单词补全,也可以设置函数补全,这样写代码就快多了
- Eclipse自动补全功能和自动生成作者、日期注释等功能设置
修改作者.日期注释格式:打开Windows->Preferences->Java->Code Style->Code Templates,点击右边窗口中的Comments,可以 ...
- Eclipse自动补全功能轻松设置 || 不需要修改编辑任何文件
本文介绍如何设置Eclipse代码自动补全功能.轻松实现输入任意字母均可出现代码补全提示框. Eclipse代码自动补全功能默认只包括 点"." ,即只有输入”." ...
- 【Qt编程】基于Qt的词典开发系列<十四>自动补全功能
最近写了一个查单词的类似有道词典的软件,里面就有一个自动补全功能(即当你输入一个字母时,就会出现几个候选项).这个自动补全功能十分常见,百度搜索关键词时就会出现.不过它们这些补全功能都是与你输入的进行 ...
随机推荐
- POJ 1985 Cow Marathon (模板题)(树的直径)
<题目链接> 题目大意: 给定一颗树,求出树的直径. 解题分析:树的直径模板题,以下程序分别用树形DP和两次BFS来求解. 树形DP: #include <cstdio> #i ...
- 获取远程IP、字符串解析
public class StringUtil { private static final Pattern IPV4_PATTERN = Pattern.compile( "^(25[0- ...
- BeautifulSoup学习 之结构
Beautiful Soup将复杂HTML文档转换成一个复杂的树形结构,每个节点都是Python对象,所有对象可以归纳为4种: Tag NavigableString BeautifulSoup Co ...
- linux（ubuntu） 安装composer（PHP用来管理依赖关系的工具 ） 和安装中国全量镜像
https://www.phpcomposer.com/ composer中文网 1:进入安装目录 cd /usr/local/bin 2:下载并安装 sudo curl -s http ...
- [模板][题解][Luogu1939]矩阵乘法加速递推（详解）
题目传送门 题目大意:计算数列a的第n项,其中: \[a[1] = a[2] = a[3] = 1\] \[a[i] = a[i-3] + a[i - 1]\] \[(n ≤ 2 \times 10^ ...
- python学习：输出九九乘法表
输出九九乘法表 代码: num1 = 1while num1 <= 9: num2 = 1 while num2 <= num1: print(str(num2)+"*" ...
- 30、进程的基础理论，并发（multiprocessing模块）
我们之前基于tcp所做的通信都只能一个一个链接只有关闭当前链接时才能去链接下一个通信,这显然与现实情况不合.今天我们将来学一个新的概念进程,来做一个python多进程的并发编程.还会贴一个用json序 ...
- nagios的安装与部署
参考文献: https://www.cnblogs.com/mchina/archive/2013/02/20/2883404.html https://www.jianshu.com/p/3476d ...
- ACM常用STL
转载于https://blog.csdn.net/riba2534/article/details/61929000 1. stack stack<int>st;//栈st,用于存放in ...
- Solve Error: node postinstall sh: node: command not found
When install the yeoman using the following command: npm install -g yo You might have the following ...