jquery implementiert ein Suchfeld ähnlich wie Baidu-js-Tutorial-php.cn

jquery implementiert ein Suchfeld ähnlich wie Baidu

小云云

Freigeben： 2017-12-04 10:42:03

Original

3026 Leute haben es durchsucht

Als Entwickler ist das Suchfeld auch eine unverzichtbare Funktion bei der Entwicklung einer Website. Kürzlich muss ich bei der Arbeit ein Suchfeld erstellen, ähnlich dem Suchfeld von Baidu. In diesem Artikel werden wir Ihnen etwas über Jquery vorstellen Implementieren Sie ein ähnliches Baidu-Suchfeld.

Es müssen zwei Funktionen erreicht werden:

1. Geben Sie das Schlüsselwort ein und zeigen Sie die passende Dropdown-Liste an

2. Wählen Sie das passende Element aus und suchen Sie nach verwandten Inhalten

Diese Suchleiste wird auch häufig auf allgemeinen E-Commerce-Websites verwendet. Analysieren Sie zunächst die Funktionsimplementierung und zeigen Sie sofort die Liste der passenden Artikel an "-Ereignis und senden Sie dann eine asynchrone Anforderung an den Hintergrund. Die Daten werden auf der Seite angezeigt. Verwenden Sie die Maus oder die Auf- und Ab-Tasten, um passende Elemente auszuwählen, und klicken Sie auf „Suchen“ oder die „Enter“-Taste, um nach bestimmten Ergebnissen zu suchen. Hier werden zwei asynchrone Anfragen verwendet, die erste fordert die passenden Elemente an und die zweite fordert die Suchergebnisse an. Die Überwachung von Tastatur-, Maus- und Eingabefeldereignissen muss ebenfalls berücksichtigt werden, d. h. die Anpassung an verschiedene ähnliche Anforderungen ist immer noch schwierig.

1.html und css

<body>
    <div id="search-form"></div>
</body>
<style type="text/css">
    *{margin: 0;padding: 0;list-style:none;border:none;}
    body {
        font-family: "microsoft yahei" !important;
        background-color: #FDFFE0;
    }
    :focus {
        outline: none;
    }
    #search-form {
        position: relative;
        top: 50px;
        display: inline;
    }
</style>

Nach dem Login kopieren

2. CSS- und js-Dateien importieren

Da der Blog keine Dateien hochladen kann, können Sie zu meinem Git gehen: http:/ /git Es gibt eine vollständige Projektdatei auf .oschina.net/manliu.com/search_frame

3. Seitenreferenz js

<script type="text/javascript">
var proposals = [&#39;百度1&#39;, &#39;百度2&#39;, &#39;百度3&#39;, &#39;百度4&#39;, &#39;百度5&#39;, &#39;百度6&#39;, &#39;百度7&#39;,&#39;17素材网&#39;,&#39;百度&#39;,&#39;新浪&#39;];
$(document).ready(function(){
    $(&#39;#search-form&#39;).complete({
        searchIn:function(val){//传入输入值，返回匹配值
            /* var reg = /^[\u4F00-\u9FA5\uF900-\uFA2D]/;
            return reg.test(val); */
            var word = "^"+val+".*";
            var rs = [];
            $.each(proposals,function(i,n){
                if(n.match(word)){
                    rs.push(n);
                }
            });
            return rs;
        },
        width:400,
        height: 30,
        submitIn: function(text){//搜索选定的值
            alert(text);        
        }
    });
});
</script>

Nach dem Login kopieren

Die searchIn-Methode wird hier verwendet, um passende Elemente zurückzugeben. In der Regel wird eine asynchrone Anforderung definiert, die Daten aus dem Hintergrund abruft und ein Array zurückgibt. Bei komplexen Anforderungen muss der Quellcode geändert werden, um nach passenden Ergebnissen zu suchen, und kann im Allgemeinen asynchron oder synchron angefordert werden.

Der obige Inhalt ist ein Tutorial zur Abfrage, um ein Suchfeld ähnlich wie Baidu zu implementieren. Ich hoffe, es kann allen helfen.

Verwandte Empfehlungen:

Css zum Erstellen eines gut aussehenden Suchfelds

So verwenden Sie Js, um die Eingabeaufforderung des Baidu-Suchfelds zu implementieren Funktion

JavaScript implementiert ein nachgeahmtes Youku-Suchfeld

Das obige ist der detaillierte Inhalt vonjquery implementiert ein Suchfeld ähnlich wie Baidu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!