ajax下拉列表模糊,JS仿百度自动下拉框模糊匹配提示

实际项目中，我们可以把数据获取改成ajax动态获取，在 getContent()中

js/jQuery实现类似百度搜索功能

#container {

position: absolute;

left: 50%;

top: 40%;

}

#content {

float: left;

position: relative;

right: 50%;

}

input {

border: 0;

width: 288px;

height: 30px;

font-size: 16px;

padding: 0 5px;

line-height: 30px;

}

.item {

padding: 3px 5px;

cursor: pointer;

}

.addbg {

background: #87A900;

}

.first {

border: solid #87A900 2px;

width: 300px;

}

#append {

border: solid #87A900 2px;

border-top: 0;

display: none;

}

var data = [

"你好，我是Michael",

"你是谁",

"你最好啦",

"你最珍贵",

"你是我最好的朋友",

"你画我猜",

"你是笨蛋",

"你懂得",

"你为我着迷",

"你是我的眼"

];

$(document).ready(function() {

$(document).keydown(function(e) {

e = e || window.event;

var keycode = e.which ? e.which : e.keyCode;

if (keycode == 38) {

if (jQuery.trim($("#append").html()) == "") {

return;

}

movePrev();

} else if (keycode == 40) {

if (jQuery.trim($("#append").html()) == "") {

return;

}

$("#kw").blur();

if ($(".item").hasClass("addbg")) {

moveNext();

} else {

$(".item").removeClass('addbg').eq(0).addClass('addbg');

}

} else if (keycode == 13) {

dojob();

}

});

var movePrev = function() {

$("#kw").blur();

var index = $(".addbg").prevAll().length;

if (index == 0) {

$(".item").removeClass('addbg').eq($(".item").length - 1).addClass('addbg');

} else {

$(".item").removeClass('addbg').eq(index - 1).addClass('addbg');

}

}

var moveNext = function() {

var index = $(".addbg").prevAll().length;

if (index == $(".item").length - 1) {

$(".item").removeClass('addbg').eq(0).addClass('addbg');

} else {

$(".item").removeClass('addbg').eq(index + 1).addClass('addbg');

}

}

var dojob = function() {

$("#kw").blur();

var value = $(".addbg").text();

$("#kw").val(value);

$("#append").hide().html("");

}

});

function getContent(obj) {

var kw = jQuery.trim($(obj).val());

if (kw == "") {

$("#append").hide().html("");

return false;

}

var html = "";

for (var i = 0; i < data.length; i++) {

if (data[i].indexOf(kw) >= 0) {

html = html + "

" + data[i] + "

"

}

}

if (html != "") {

$("#append").show().html(html);

} else {

$("#append").hide().html("");

}

}

function getFocus(obj) {

$(".item").removeClass("addbg");

$(obj).addClass("addbg");

}

function getCon(obj) {

var value = $(obj).text();

$("#kw").val(value);

$("#append").hide().html("");

}

以上所述是小编给大家介绍的JS仿百度自动下拉框模糊匹配提示，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

时间： 2016-07-22