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

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

一、页面代码：

nbsp;HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">                   #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 = 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键输入：

相关推荐：

js如何利用setInterval定时器方法实现轮播图 （完整代码）

js封装_new函数以及实现new关键字的方法（附代码测试）

以上就是js实现类似于联想关键词的搜索功能（附代码）的详细内容，更多请关注【创想鸟】其它相关文章！