使用ul和li实现的智能提示框，简单优化了一下js，效果较select好一些，而且避免了select的自身缺陷。
html代码：
<div class="topBox">
<div class="searchBox">
<input class="searchInput" id="searchInput" onkeydown="searchUpDown(event)"
placeholder="请输入检索内容..." maxlength="32"/>
<img class="searchIcon" id="searchBtn" src="../iBlog/images/icons/search_icon.png"/>
</div>
<ul class="searchNotice">
<li>平淡如水</li>
<li>我在岁月中找到他</li>
<li>将一生交付</li>
<li>将一生交付333</li>
</ul>
<div class="ad">
<img src="../upload/meinv.jpg"/>
</div>
</div>
css代码：
.topBox {
width: 100%;
position: relative;
}
.searchBox {
width: 95%;
height: 50px;
line-height: 50px;
padding: 15px 0 10px 0;
margin: 0px auto;
background: rgba(10,10,10,0.3);
border-radius: 3px;
}
.searchInput {
float: left;
width: 70%;
height: 25px;
margin-left: 35px;
border: 1px solid #999;
border-radius: 3px;
padding: 5px;
text-indent: 5px;
background: rgba(153,153,153,.2);
}
.searchIcon {
float: right;
height: 35px;
margin-right: 40px;
cursor: pointer;
background: rgba(150,150,150,0.4);
border: 1px solid #999;
border-radius: 3px;
}
.searchNotice {
width: 69%;
display: none;
position: absolute;
z-index: 1001;
top: 53px;
left: 46px;
background: rgba(50,50,50,.5);
border-radius: 3px;
border: 1px solid #444;
}
.searchNotice li {
list-style-type: none;
height: 25px;
line-height: 25px;
font-size: 14px;
text-indent: 10px;
cursor: pointer;
overflow-y: hidden;
}
.searchNotice li:hover {
background: rgba(80,180,80,.7);
}
.searchNotice .choose {
background: rgba(80,180,80,.7);
}
js代码：
var data = [
{'data': '1122334'},
];
var ckList;
$(function () {
data = searchData(data, '', true);
var f = false;
$('.searchNotice').hover(function () {
f = true;
}, function () {
f = false;
});
$('#searchInput').blur(function () {
if (!f) {
$('.searchNotice').hide();
}
});
});
var tempCode = -1;
function searchUpDown(e) {
var key = window.event ? e.keyCode : e.which;
tempCode = key;
if (key == 40) {//down
if ($('.searchNotice li.choose').length > 0 && $('.searchNotice li.choose').next().length > 0) {
$('.searchNotice li.choose').next().addClass('choose').siblings().removeClass('choose');
} else {
$('.searchNotice li:first-child').addClass('choose').siblings().removeClass('choose');
}
} else if (key == 38) {//up
if ($('.searchNotice li.choose').length > 0 && $('.searchNotice li.choose').prev().length > 0) {
$('.searchNotice li.choose').prev().addClass('choose').siblings().removeClass('choose');
} else {
$('.searchNotice li:last-child').addClass('choose').siblings().removeClass('choose');
}
} else if (key == 13) {//enter
if ($('.searchNotice li.choose').length > 0) {
$('#searchInput').val($('.searchNotice li.choose').text());
} else {
$('#searchBtn')[0].click();
}
}
}
var tempData = null;
/**
* 搜索框智能提示
* @returns
*/
function notice () {
var max = 10;
var res = {
'list': []
};
var info = $('#searchInput').val().trim();
if (info != null || info != "") {
if (info.length >= 1) {
info = info.toLowerCase();
data = searchData(data, info, false);
if (tempData == data && $('.searchNotice').css('display') == 'block'
&& (tempCode == 38 || tempCode == 40)) {
return;
}
tempData = data;
if (data == null || data == undefined) {
$('.searchNotice').empty().hide();
return;
}
var t = 0;
for(var i = 0; i < data.length; i++) {
if (t >= max) {
break;
}
if (data[i].data.toLowerCase().indexOf(info) > -1) {
t++;
var temp = {
'order': data[i].data.toLowerCase().indexOf(info),
'content': data[i].data.toLowerCase(),
}
res.list.push(temp);
}
}
res.list.sort(function (a, b) {
return a.order - b.order;
});
$('.searchNotice').empty();
if (res.list == null || res.list.length == 0) {
$('.searchNotice').empty().hide();
return;
}
$.each(res.list, function (i, e) {
$('.searchNotice').append('<li title="' + e.content + '">' +
e.content.replace(info, '<span style="color: #FF2F2F;font-weight: bolder;">' +
info + '</span>') + '</li>');
});
$('.searchNotice').show();
$('.searchNotice li').click(function () {
$('#searchInput').val($(this).text());
$(this).parent().hide();
});
}
if (info.length < 1) {
$('.searchNotice').empty().hide();
}
} else {
$('.searchNotice').empty().hide();
}
}
var flag;
function searchData(data, info, first) {
if (flag == info) {
return data;
} else {
flag = info;
}
var list;
data = [];
if (first == true) {
list = loadTitleList("J");
} else {
list = loadTitleList(info);
}
if (list != null) {
data = addData(data, list);
}
data = addData(data, ckList);
if (list != null) {
data = addData(data, list);
}
return data;
}
function addData(data, source) {
data = data == null || data == undefined ? [] : data;
if (source == undefined || source == null) {
return;
}
for (var i = 0; i < source.length; i++) {
data.push(source[i]);
}
return data;
}
function loadTitleList(info) {
var data = [];
$.ajax({
url: "",
async: false,
data: {
info: info,
size: 12
},
success: function (res) {
if (res != null && res.resCode == 1) {
data = res.resData;
}
}, error: function () {
},
dataType: "json"
});
return data;
}
