jquery的輸入框自動補全功能+ajax
阿新 • • 發佈：2018-09-16
image -- spa 數據 adding box utf 分類 .com
jquery的輸入框自動補全功能+ajax
2017年05月10日 18:51:39 辣姐什麽鬼 閱讀數：1461 個人分類： web前端內容參考網友文章寫成，原博的鏈接找不到了，但是感謝分享！
效果圖：
涉及到ajax請求我這裏本地請求不到數據就先放測試代碼，在文章的最後會放上ajax代碼：
用來測試的代碼：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>jquery自動補全+ajax</title
正式的用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