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的词典开发系列<十四>自动补全功能
最近写了一个查单词的类似有道词典的软件,里面就有一个自动补全功能(即当你输入一个字母时,就会出现几个候选项).这个自动补全功能十分常见,百度搜索关键词时就会出现.不过它们这些补全功能都是与你输入的进行 ...
随机推荐
- k-近邻算法概述
2.1 k-近邻算法概述 k-近邻算法采用测量不同特征值之间的距离方法进行分类. 优点:精度高.对异常值不敏感.无数据输入假定. 确定:计算复杂度高.空间复杂度高. 适用数据范围:数值型和标称型. 工 ...
- python统计字词练习
方法一: import operator from nltk.corpus import stopwords stop_words = stopwords.words('English')#目的是去除 ...
- Nested Dolls 贪心 + dp
G: Nested Dolls Time Limit: 1 Sec Memory Limit: 128 Mb Submitted: 99 Solved: 19 Descript ...
- 转 mysql Next-Key Locking
原文:http://dev.mysql.com/doc/refman/5.5/en/innodb-next-key-locking.html 14.5.2.5 Avoiding the Phantom ...
- 201771010126 王燕《面向对象程序设计（Java）》第七周实验总结
实验七 继承附加实验 实验时间 2018-10-11 1.实验目的与要求 (1)进一步理解4个成员访问权限修饰符的用途: private--私有域或私有方法:只能在定义它的类中使用 public--公 ...
- vue 监听路由变化
方法一:通过 watch // 监听,当路由发生变化的时候执行 watch:{ $route(to,from){ console.log(to.path); } }, 或 // 监听,当路由发生变化的 ...
- kafka安装与测试
基于linux-Centos7.0环境先进行测试学习 Producer即生产者,向Kafka集群发送消息,在发送消息之前,会对消息进行分类,即Topic, Topic即主题,通过对消息指定主题可以将消 ...
- POJ 1324 Holedox Moving (状压BFS)
POJ 1324 Holedox Moving (状压BFS) Time Limit: 5000MS Memory Limit: 65536K Total Submissions: 18091 Acc ...
- mysql 5.7.21 解压版安装配置方法图文教程
引用:https://www.jb51.net/article/140951.htm 1.首先,你要下载MySQL解压版,下载地址,图解: 2.解压安装包,根据自己的喜好选择路径,我选择的路径是C:\ ...
- spring cloud
如果是一个大型的网站,内部子系统较多.接口非常多的情况下,RPC框架的好处就显示出来了,首先就是长链接,不必每次通信都要像http 一样去3次握手什么的,减少了网络开销:其次就是RPC框架一般都有注册 ...