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的词典开发系列<十四>自动补全功能
最近写了一个查单词的类似有道词典的软件,里面就有一个自动补全功能(即当你输入一个字母时,就会出现几个候选项).这个自动补全功能十分常见,百度搜索关键词时就会出现.不过它们这些补全功能都是与你输入的进行 ...
随机推荐
- linux服务器文件授权命令
分两部分改属主和属组权限:更改权限,递归方式 chmod -R 755 /var/www/html/test.com更改属主,递归chown -R apache:apache /var/www/htm ...
- 【Vue】-- 数据双向绑定的原理 --Object.defineProperty()
Object.defineProperty()方法被许多现代前端框架(如Vue.js,React.js)用于数据双向绑定的实现,当我们在框架Model层设置data时,框架将会通过Object.def ...
- git 入门教程之删除文件
删除文件 回忆一下文件的常见操作,新增文件,修改文件,删除文件等,新增和修改文件都单独讨论过,现在我们来研究一下如何删除文件. 你可能会说删除文件还不简单啊,直接 rm -rf <file> ...
- 通过ViewPager 实现图片轮播
通过ViewPager 实现图片轮播 首先来个效果图 布局文件: LinearLayout 用来存放下方的几个小白点. <?xml version="1.0" encodin ...
- World Finals 2018 感想
垃圾比赛卡我读入卡我输出毁我青春.
- angular.isElement()
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- php获取文章的第一张图片
今天做东西的时候遇到一个问题就是如何把文章提取出来作为文章列表呢? 因为用了Ueditor,所以提交的数据包含了html标签. 搜索了一会找到了一个方案,用php自带的函数去掉了html标签. $ar ...
- python提取xml属性导入Mysql
xml文档来自ganglia-gmond端telnet localhost 8649产生出来的文档,由于ganglia每隔一段时间就更新数据,为了永久保存数据到MySQL中,就用python写了最开始 ...
- 4、初识python
今天开始进行python的系统学习开始写随笔希望对看到的人有所帮助,写的不对的地方可以指出来大家共同进步. 预习: 1.安装python2和python3,实现多版本共存 2.用python语言编写代 ...
- transient关键字的使用
实例说明 在保存对象时,会将对象的状态也一并保存,然而有些状态是不应该被保存的,如表示密码的属性.此时可以使用transient关键字来修饰不想保存的属性. 关键技术 transient关键字用来防止 ...