首頁 > 文章 > web前端 > js實作類似聯想關鍵字的搜尋功能（附程式碼）

js實作類似聯想關鍵字的搜尋功能（附程式碼）

不言原創: 2018-08-13 16:14:314153瀏覽

這篇文章帶給大家的內容是關於js實現類似聯想關鍵字的搜尋功能（附程式碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

一、頁面程式碼：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>js/jQuery实现类似百度搜索功能</title>
  <meta name="Author" content="Michael">
  <meta name="Keywords" content="js/jQuery实现类似百度搜索功能">
  <meta name="Description" content="js/jQuery实现类似百度搜索功能,可用键盘控制">
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
  <style type="text/css">
    #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;
    }
  </style>
 </head>
 <body>
    <p id="container">
    <p id="content">
        <p class="first"><input id="kw" onKeyup="getContent(this);" /></p>
        <p id="append"></p>
    </p>
    </p>
 </body>
</html>

二、js程式碼：

<script type="text/javascript">
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(&#39;addbg&#39;).eq(0).addClass(&#39;addbg&#39;);
            }
           
        }else if(keycode == 13){
            dojob();
        }
    });
    var movePrev = function(){
        $("#kw").blur();
        var index = $(".addbg").prevAll().length;
        if(index == 0){
            $(".item").removeClass(&#39;addbg&#39;).eq($(".item").length-1).addClass(&#39;addbg&#39;);
        }else{
            $(".item").removeClass(&#39;addbg&#39;).eq(index-1).addClass(&#39;addbg&#39;);
        }
    }
   
    var moveNext = function(){
        var index = $(".addbg").prevAll().length;
        if(index == $(".item").length-1){
            $(".item").removeClass(&#39;addbg&#39;).eq(0).addClass(&#39;addbg&#39;);
        }else{
            $(".item").removeClass(&#39;addbg&#39;).eq(index+1).addClass(&#39;addbg&#39;);
        }
       
    }
   
    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 + "<p class=&#39;item&#39; onmouseenter=&#39;getFocus(this)&#39; onClick=&#39;getCon(this);&#39;>" + data[i] + "</p>"
        }
    }
    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("");
}
</script>

三、運作效果：
    1.輸入框輸入關鍵字：

  2.鍵盤上下鍵選取：


3.enter鍵輸入：

相關建議：

js如何利用setInterval定時器方法實作輪播圖（完整程式碼）

####js封裝_new函數以及實作new關鍵字的方法（附程式碼測試）## ####

以上是js實作類似聯想關鍵字的搜尋功能（附程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：nodejs中multiparty實作檔案上傳的程式碼範例下一篇：nodejs中multiparty實作檔案上傳的程式碼範例

看更多