<script type="text/javascript">
$(function(){
// $("head").append($("<meta http-equiv='Content-Security-Policy' content='upgrade-insecure-requests' />"))
//取得div层
var pd = Common.getPdJson();
var $search = $('#div_cname');
//取得输入框JQuery对象
var $searchInput = $search.find('#gencontrolcname');
//关闭浏览器提供给输入框的自动完成
$searchInput.attr('autocomplete','off');
//创建自动完成的下拉列表，用于显示服务器返回的数据,插入在搜索按钮的后面，等显示的时候再调整位置
var $autocomplete = $('<div class="autocomplete"></div>').hide().insertAfter('#gencontrolcname');
//清空下拉列表的内容并且隐藏下拉列表区
var clear = function(){
$autocomplete.empty().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 searchkey = "";
var searchTimeout = 200;
var timer = null;
var ajax_request = function(){
var str = $("#gencontrolcname").val();
if(!str){
return;
}
if(timer != null){
clearInterval(timer);
timer =null;
}
timer = setInterval(function(){
if(searchkey && searchkey != str){
searchkey = str;
return;
}
clearInterval(timer);
searchkey = str;
var submitData = {};
// for(var key in pd){
// submitData[key] = pd[key];
// }
// submitData.count = 50;
// submitData.search = str;
// submitData.customerType = "DefValAllUser";
// submitData.customer = pd.customer;
// submitData.rad = (new Date()).getTime();
// submitData.ISFAST = "1";
var submitData={
word:"速",
pageSize:50,
pageNum:1
};
if(str){
$("#labSearchLoadingText").show();//请稍后
Common.ajax({
// data:JSON.stringify(submitData),
// url:"http://192.168.1.185:8013/enterpriseSearchALL/?word=速&pageSize=10&pageNum=1",
// url:"http://192.168.1.185:8013/enterpriseSearchALL",
url:BasicsApi.user.getDetail,
data: {
userId: "1"
},
// type:"get",
success:function(data){
$("#labSearchLoadingText").hide();
//清空并隐藏下拉列表
$autocomplete.empty().hide();
if(data.reason=="ok" && data.result.items.length > 0) {
//遍历data，添加到自动完成区
$.each(data.result.items, function(index,term) {
//创建li标签,添加到下拉列表中
$('<li></li>').text(term.name)
.appendTo($autocomplete)
.attr("regStatus",term.regStatus)
.attr("companyId",term.id)
.attr("name",term.name)
.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.name);
//清空并隐藏下拉列表
$autocomplete.empty().hide();
});
});//事件注册完毕
//设置下拉列表的位置，然后显示下拉列表
var ypos = $searchInput.position().top;
var xpos = $searchInput.position().left;
$autocomplete.css('width',$searchInput.css('width'));
$autocomplete.css({'position':'absolute','left':xpos + "px",'top':(ypos + 30) +"px","z-index":9999,"max-height":200});
setSelectedItem(0);
//显示下拉列表
$autocomplete.show();
}else{
console.log(data.reason)
}
}
});
}
},searchTimeout);
};
//对输入框进行事件注册
$searchInput.keyup(function(event) {
//字母数字，退格，空格
if(event.keyCode > 40 || event.keyCode == 8 || event.keyCode ==32) {
//首先删除下拉列表中的信息
$autocomplete.empty().hide();
clearTimeout(timeoutid);
timeoutid = setTimeout(ajax_request,400);
}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 代表鼠标离开
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).attr("name"));
$autocomplete.empty().hide();
event.preventDefault();
}
}).keydown(function(event){
//esc键
if(event.keyCode == 27 ) {
$autocomplete.empty().hide();
event.preventDefault();
}
});
});
</script>
css
/*搜索下拉样式*/
.autocomplete{
background-color: #fff;
border: 1px solid rgba(227,227,227,1);
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
padding: 4px;
overflow-y: auto;
}
.autocomplete li {
padding: 5px;
cursor: pointer;
width: 100%;
min-height: 30px;
box-sizing: border-box;
transition: all 1s ease 0s;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
list-style-type: none;
}
.autocomplete li:hover {
background: #1e90ff;
color: #fff;
}
.autocomplete li.highlight {
background-color: #1e90ff;
color: #fff;
}
