<style type="text/css">
#search {
text-align: center;
position: relative;
}
.droplist {
border: 1px solid #9ACCFB;
background-color: white;
text-align: left;
overflow: auto;
position: relative;
}
.droplist li {
list-style-type: none;
}
.clickable {
cursor: default;
}
.highlight {
background-color: #9ACCFB;
}
</style>
<div id="search">
<label for="search-text">請輸入關鍵詞</label><input type="text" id="search-text" name="search-text" autocomplete="off" />
<div class="droplist"></div>
<div class="droplist-btn"><i class="fa fa-plus"></i>新增供應商</div>
</div>
<script type="text/javascript">
$(function () {
//取得div層
var $search = $('#search');
//取得輸入框JQuery對象
var $searchInput = $search.find('#search-text');
//建立自動完成的下拉清單，用于顯示伺服器傳回的資料,插入在搜尋按鈕的後面，等顯示的時候再調整位置
var $autocomplete = $(".droplist").hide();
var $autocompbtn = $(".droplist-btn").hide().insertAfter('.droplist');
//清空下拉清單的内容并且隐藏下拉清單區
var clear = function () {
$autocomplete.empty().hide();
$autocompbtn.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': '../../CRMManage/Customer/GetListSeach', //伺服器的位址
'data': { 'keyword': $searchInput.val() }, //參數
'dataType': 'json', //傳回資料類型
'type': 'get', //請求類型
'success': function (data) {
if (data.length) {
var liNum;
//周遊data，添加到自動完成區
$.each(data, function (index, term) {
liNum = index;
//建立li标簽,添加到下拉清單中
$('<li>' + term.FullName+'</li>').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.FullName);
//清空并隐藏下拉清單
$autocomplete.empty().hide();
$autocompbtn.hide();
});
});//事件注冊完畢
//設定下拉清單的位置，然後顯示下拉清單
if (liNum >= 6) {
$autocomplete.css('height', '150px');
} else {
$autocomplete.css('height', 'auto');
}
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();
$autocompbtn.show();
}
}
});
};
//對輸入框進行事件注冊
$searchInput
.keyup(function (event) {
//字母數字，倒退，空格
if (event.keyCode > 40 || event.keyCode == 8 || event.keyCode == 32) {
//首先删除下拉清單中的資訊
$autocomplete.empty().hide();
$autocompbtn.hide();
clearTimeout(timeoutid);
timeoutid = setTimeout(ajax_request, 1);
}
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 代表滑鼠離開
$autocomplete.scroll();
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();
$autocompbtn.hide();
event.preventDefault();
}
})
.keydown(function (event) {
//esc鍵
if (event.keyCode == 27) {
$autocomplete.empty().hide();
$autocompbtn.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> 學習交流群：364976091