jquery implémente un champ de recherche similaire à Baidu-js tutoriel-php.cn

jquery implémente un champ de recherche similaire à Baidu

小云云

Libérer： 2017-12-04 10:42:03

original

3086 Les gens l'ont consulté

En tant que développeur, le champ de recherche est également une fonction indispensable lors du développement d'un site Web. Récemment, j'ai besoin de créer un champ de recherche au travail, similaire au champ de recherche de Baidu. Dans cet article, nous partagerons avec vous sur Jquery. implémentez un champ de recherche Baidu similaire.

Besoin d'atteindre deux fonctions :

1. Entrez le mot-clé et affichez la liste déroulante correspondante

2. Sélectionnez l'élément correspondant et recherchez le contenu associé

Cette barre de recherche est également souvent utilisée dans les sites Web de commerce électronique généraux. Tout d'abord, analysez l'implémentation de la fonction. Saisissez le mot-clé et affichez immédiatement la liste des éléments correspondants. Pour implémenter cette fonction, la zone de saisie doit lier la "saisie". ", puis envoyez une requête asynchrone en arrière-plan. Les données sont affichées sur la page. Utilisez la souris ou les touches haut et bas pour sélectionner les éléments correspondants, puis cliquez sur Rechercher ou sur la touche « Entrée » pour rechercher des résultats spécifiques. Deux requêtes asynchrones sont utilisées ici, la première demande les éléments correspondants et la seconde demande les résultats de la recherche. Les événements du clavier, de la souris et de la zone de saisie doivent également être pris en compte, c'est-à-dire qu'il est encore difficile de bien le faire.

1.html et 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>

Copier après la connexion

2. Importer des fichiers css et js

Comme le blog ne peut pas télécharger de fichiers, vous pouvez aller sur mon git : http:/ /git Il existe un fichier de projet complet sur .oschina.net/manliu.com/search_frame

3. Référence de page 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>

Copier après la connexion

La méthode searchIn ici est utilisée pour renvoyer les éléments correspondants, généralement, l'un d'entre eux est défini à l'intérieur. La requête asynchrone récupère les données en arrière-plan et renvoie un tableau. Pour les requêtes complexes, le code source doit être modifié. submitIn est utilisé pour rechercher les résultats correspondants et peut généralement être demandé de manière asynchrone ou synchrone.

Le contenu ci-dessus est un tutoriel sur les requêtes pour implémenter un champ de recherche similaire à Baidu. J'espère qu'il pourra aider tout le monde.

Recommandations associées :

Css pour créer un beau champ de recherche

Comment utiliser Js pour implémenter l'invite du champ de recherche Baidu fonction

JavaScript implémente le champ de recherche imitation Youku

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!