Heim > Artikel > Web-Frontend > jquery implementiert ein Suchfeld ähnlich wie Baidu

jquery implementiert ein Suchfeld ähnlich wie Baidu

小云云Original: 2017-12-04 10:42:033006Durchsuche

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>

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>

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!

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：Lösung dafür, dass die Übermittlungsseite von JQuery.get nicht springtNächster Artikel：Lösung dafür, dass die Übermittlungsseite von JQuery.get nicht springt

In Verbindung stehende Artikel

Mehr sehen