Heim > Artikel > Web-Frontend > js implementiert eine Suchfunktion ähnlich den Lenovo-Schlüsselwörtern (Code im Anhang)

js implementiert eine Suchfunktion ähnlich den Lenovo-Schlüsselwörtern (Code im Anhang)

不言Original: 2018-08-13 16:14:314162Durchsuche

Der Inhalt dieses Artikels befasst sich mit der Implementierung einer Suchfunktion ähnlich den Lenovo-Schlüsselwörtern (mit Code). Ich hoffe, dass er für Sie hilfreich ist.

1. Seitencode:

<!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>

2. js-Code:

<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>

3. Vorgangseffekt:
1. Geben Sie Schlüsselwörter in das Eingabefeld ein :

2. Verwenden Sie die Auf- und Ab-Tasten auf der Tastatur, um Folgendes auszuwählen:

3.Geben Sie die Tasteneingabe ein:

Verwandt Empfehlungen:

Wie js die setInterval-Timer-Methode verwendet, um ein Karusselldiagramm zu implementieren (vollständiger Code)

js kapselt die _new-Funktion und wie man die neue implementiert Schlüsselwort (mit Codetest)

Das obige ist der detaillierte Inhalt vonjs implementiert eine Suchfunktion ähnlich den Lenovo-Schlüsselwörtern (Code im Anhang). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Codebeispiel für Multiparty zur Implementierung des Datei-Uploads in NodeJSNächster Artikel：Codebeispiel für Multiparty zur Implementierung des Datei-Uploads in NodeJS

In Verbindung stehende Artikel

Mehr sehen