效果图
模糊提示
css代码
基本上没什么设计，能用就好。
#auto_div {
position: absolute;
z-index: 999;
left: 0px;
top: 33px;
width: 468px;
border: 1px solid #74c0f9;
display: none;
background: #FFF;
}
Jquery部分
- 首先是获取提示词部分
var highlightindex = -1; //高亮设置（-1为不高亮）
//自动完成
function AutoComplete(auto, search) {
if ($("#" + search).val() != "") {
var autoNode = $("#" + auto); //缓存对象（弹出框）
var carlist = new Array();
var n = 0;
var mylist = [];
var maxTipsCounts = 8 // 最大显示条数
var aj = $.ajax({
url: '/xxx/xxx' + "&str=" + $("#" + search).val(), // 跳转到后台
data: {},
type: 'get',
cache: false,
dataType: 'json',
success: function(data) {
if (data.error == "0") {
mylist = data.info;
if (mylist == null) {
autoNode.hide();
return;
}
autoNode.empty(); //清空上次的记录
for (i in mylist) {
if (i < maxTipsCounts) {
var wordNode = mylist[i]; //弹出框里的每一条内容
var newDivNode = $("<div>").attr("id", i); //设置每个节点的id值
document.querySelector("#auto_div").style.width = $("#search_text").outerWidth(true) + 'px'; //设置提示框与输入框宽度一致
newDivNode.attr("style", "font:14px/25px arial;height:25px;padding:0 8px;cursor: pointer;");
newDivNode.html(wordNode).appendTo(autoNode); //追加到弹出框
//鼠标移入高亮，移开不高亮
newDivNode.mouseover(function() {
if (highlightindex != -1) { //原来高亮的节点要取消高亮（是-1就不需要了）
autoNode.children("div").eq(highlightindex).css("background-color", "white");
}
//记录新的高亮节点索引
highlightindex = $(this).attr("id");
$(this).css("background-color", "#ebebeb");
});
newDivNode.mouseout(function() {
$(this).css("background-color", "white");
});
//鼠标点击文字上屏
newDivNode.click(function() {
//取出高亮节点的文本内容
var comText = autoNode.hide().children("div").eq(highlightindex).text();
highlightindex = -1;
//文本框中的内容变成高亮节点的内容
$("#" + search).val(comText);
$("#search-form").submit();
})
if (mylist.length > 0) { //如果返回值有内容就显示出来
autoNode.show();
} else { //服务器端无内容返回 那么隐藏弹出框
autoNode.hide();
//弹出框隐藏的同时，高亮节点索引值也变成-1
highlightindex = -1;
}
}
}
}
}
});
}
}
- 键盘操作部分
$(function() {
//键盘操作
$("#search_text").keyup(function(event) {
//处理键盘操作
var myEvent = event || window.event;
var keyCode = myEvent.keyCode;
if (keyCode == 38 || keyCode == 40) {
if (keyCode == 38) { //向上
var autoNodes = $("#auto_div").children("div");
if (highlightindex != -1) {
autoNodes.eq(highlightindex).css("background-color", "white");
highlightindex--;
} else {
highlightindex = autoNodes.length - 1;
}
if (highlightindex == -1) {
highlightindex = autoNodes.length - 1;
}
autoNodes.eq(highlightindex).css("background-color", "#ebebeb");
}
if (keyCode == 40) { //向下
var autoNodes = $("#auto_div").children("div");
if (highlightindex != -1) {
autoNodes.eq(highlightindex).css("background-color", "white");
}
highlightindex++;
if (highlightindex == autoNodes.length) {
highlightindex = 0;
}
autoNodes.eq(highlightindex).css("background-color", "#ebebeb");
}
} else if (keyCode == 13) { //回车键
if (highlightindex != -1) {
var comText = $("#auto_div").hide().children("div").eq(highlightindex).text();
highlightindex = -1;
$("#search_text").val(comText);
if ($("#auto_div").is(":visible")) {
$("#auto_div").css("display", "none")
}
$("#search-form").submit();
}
checkInput();
} else {
if ($("#search_text").val() == "") {
$("#auto_div").hide();
} else { //有文字输入时获取提示词
AutoComplete("auto_div", "search_text");
}
}
});
//点击页面隐藏自动补全提示框
document.onclick = function(e) {
var e = e ? e : window.event;
var tar = e.srcElement || e.target;
if (tar.id != "search_text") {
if ($("#auto_div").is(":visible")) {
$("#auto_div").css("display", "none")
}
}
}
});
当有输入时就会自动获取提示词，在移动端设备的话，没有鼠标移入高亮，直接点击提示词然后进行搜索。
maxTipsCounts可以设置最大显示提示条数。
对于移动端设备来说，并没有键盘的上下左右操作，可以把这部分省略了，然后写成一个函数。
