//输入框keyup事件
function loadInputSearch(targetDom,items) {
//输入框获取焦点
$(targetDom).focus(function () {
if($(targetDom) == ''){
var searchResult = items;
loadInputDrop(targetDom,searchResult,items);
}else{
var inputWords = $(targetDom).val();
var inputWordsArray = $.trim(inputWords).split(/\s+/);
var searchResult = items;
$.each(inputWordsArray,function (i, item) {
searchResult=$.grep(searchResult, function(n, i){return n.toLowerCase().indexOf(item.toLowerCase())!=-1;});
})
loadInputDrop(targetDom,searchResult,items)
}
})
//输入框键入
$(targetDom).keyup(function () {
var inputWords = $(targetDom).val();
var inputWordsArray = $.trim(inputWords).split(/\s+/);
var searchResult = items;
$.each(inputWordsArray,function (i, item) {
searchResult=$.grep(searchResult, function(n, i){return n.toLowerCase().indexOf(item.toLowerCase())!=-1;});
})
// console.log(searchResult);
loadInputDrop(targetDom,searchResult,items)
})
}
//加载搜索下拉框
function loadInputDrop(targetDom,searchResult,items) {
var dropBox = '<div id="dropbox"><ul id="searchList"></ul></div>'
$("#dropbox").remove()
$(targetDom).parent().append(dropBox)
$("#dropbox ul").append('<li class="dropline" id="dropcustom">自定义</li>')
for(var i = 0; i < searchResult.length; i++){
$("#dropbox ul").append('<li class="dropline1">'+searchResult[i]+'</li>');
if(i>100) break
}
$(".dropline1").hover(function(){
$(this).css("background-color","lightblue");
},function(){
$(this).css("background-color","white");
});
$(".dropline1").mousedown(function(){
$(targetDom).val($(this).text())
$("#dropbox").hide()
})
$("#dropcustom").unbind("mousedown").bind("mousedown",function () {
var index = layer.open({
type: 1,
skin: "layui-layer-rim",
area: ["550px", 'auto'],
title: "自定义",
content: '<div style="margin-left: 20px">请输入自定义名称：<input type="text" id="setName" style="margin-top: 20px;"/></div>',
btn: ['确定', '取消'],
shadeClose:true,
yes: function (index, layero) {
var customName = $.trim($("#setName").val());
if(customName == ''){
layer.alert('自定义名称不能为空！');
}else{
$(targetDom).val(customName)
$("#dropbox").hide()
items.push(customName)
}
layer.close(index);
},
btn2: function (index, layero) { //取消按钮后的处理函数
layer.close(index);
},
});
})
//输入框失去焦点
$(targetDom).unbind("blur").bind("blur",function () {
// console.log($(targetDom).val());
if(searchResult.indexOf($(targetDom).val()) == -1){
$(targetDom).val('')
}
$("#dropbox").hide()
})
}
涉及到的问题：输入框失焦事件与按钮点击事件冲突的问题 解决办法：将按钮的点击（click）事件改为按下（mousedown）事件
原代码：
$(".dropline1").click(function(){
$(targetDom).val($(this).text())
$("#dropbox").hide()
})
$("#dropcustom").unbind("click").bind("click",function ()
css：
#dropbox{
border:#ccc solid 1px;
border-top: transparent;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
max-height: 150px;
overflow:auto;
z-index: 100;
position: absolute;
background-color: white;
width: 90%;
}
