javascript搜索框联想搜索_js实现类似于联想关键词的搜索功能（附代码）

本篇文章给大家带来的内容是关于js实现类似于联想关键词的搜索功能(附代码)，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

一、页面代码：

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;

}

二、js代码：

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("");

}

三、运行效果：

1.在输入框输入关键字：

2.键盘上下键选中：

3.enter键输入：

相关推荐：