Maison > interface Web > Questions et réponses frontales > JavaScript implémente la recherche Baidu

JavaScript implémente la recherche Baidu

王林
Libérer: 2023-05-26 20:16:06
original
1656 Les gens l'ont consulté

JavaScript est un langage de programmation interprété de haut niveau largement utilisé dans le développement Web. Parmi eux, JavaScript peut donner aux pages Web des effets dynamiques, une interactivité et des fonctions logiques. La recherche Baidu est l'une des fonctions courantes du site Web. Cet article explique comment mettre en œuvre la recherche Baidu via JavaScript.

  1. Structure HTML

Tout d'abord, vous devez créer des composants tels que le champ de recherche et le bouton de soumission dans le fichier HTML. Ici, nous prenons comme exemple le champ de recherche sur la page d'accueil de Baidu :

<form id="search-form" action="http://www.baidu.com/s" target="_blank">
  <input type="text" id="search-input" name="wd" autocomplete="off" placeholder="请输入关键字">
  <button type="submit" id="search-button">搜索</button>
</form>
Copier après la connexion

Dans le code, form représente le composant du formulaire, et l'attribut action spécifie l'adresse soumise (ici est l'adresse de la recherche Baidu), target précise l'ouverture des résultats de la recherche dans une nouvelle fenêtre. Le id de la zone de texte est search-input, et le id du bouton est search-button. Ces deux identifiants se trouvent dans Il sera utilisé dans le code JavaScript suivant. form表示表单组件,action属性指定了提交的地址(这里是百度搜索的地址),target指定了在新窗口中打开搜索结果。文本框的idsearch-input,按钮的idsearch-button,这两个id在后面的JavaScript代码中会用到。

  1. JavaScript实现搜索功能

接下来,我们需要通过JavaScript编写代码实现搜索功能。在script标签中添加以下代码:

var form = document.getElementById('search-form');
var input = document.getElementById('search-input');

form.onsubmit = function(e) {
  e.preventDefault();
  var query = input.value;
  window.location.href = 'http://www.baidu.com/s?wd=' + encodeURIComponent(query);
};
Copier après la connexion

首先,通过document.getElementById方法获取搜索框和表单组件。然后,为表单组件的onsubmit事件添加一个回调函数,阻止表单默认的提交行为。在回调函数的里面,获取搜索框中的文本值,并使用window.location.href属性进行重定向,把查询字符串拼接到百度搜索的地址中。

值得注意的是,由于查询字符串中可能包含特殊字符,需要使用encodeURIComponent方法来进行编码,确保在URL中传递的参数符合标准。

  1. UI美化

为了让搜索功能更加美观、易于使用,我们可以通过CSS样式对搜索框和按钮进行美化。可以添加如下代码:

#search-form {
  display: inline-block;
  padding: 10px;
  background-color: #f1f1f1;
  border-radius: 5px;
  box-shadow: 0 1px 2px #ccc;
  font-size: 14px;
}

#search-input {
  width: 300px;
  height: 30px;
  padding: 5px;
  border: none;
  border-radius: 5px;
  outline: none;
  font-size: 16px;
}

#search-button {
  width: 80px;
  height: 40px;
  margin-left: 5px;
  background-color: #3385ff;
  color: #fff;
  border: none;
  border-radius: 5px;
  font-size: 18px;
  cursor: pointer;
}

#search-button:hover {
  background-color: #2366d1;
}
Copier après la connexion

代码中,我们为搜索框和按钮分别添加了样式,包含了背景色、边框、圆角、阴影、字体大小等属性。另外,按钮在鼠标悬停时颜色发生变化,增加了交互性。

  1. 实现自动补全

除了基本的搜索功能,我们还可以通过JavaScript实现查询关键字自动补全。当用户输入一些字母后,会根据输入的内容显示匹配的搜索关键字。

我们可以借助第三方库jquery-ui来实现输入自动补全的功能。在代码维护上也会更加简单。

<head>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.12.4.js"></script>
  <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
  <!--...-->
  <script>
    $(function() {
      $("#search-input").autocomplete({
        source: function(request, response) {
          $.ajax({
            url: "http://www.baidu.com/sugrec",
            dataType: "jsonp",
            data: {
              wd: request.term
            },
            success: function(data) {
              var results = [];
              if (data.g && data.g.length) {
                $.each(data.g, function(i, val) {
                  results.push({
                    label: val.q,
                    value: val.q
                  });
                });
              }
              response(results);
            }
          });
        },
        minLength: 1,
        delay: 150
      });
    });
  </script>
</body>
Copier après la connexion

我们借用了百度提供的接口进行了关键字的提示。发现input输入框的id使用了jqueryUI框架的autocomplete函数来实现关键字联想。其中,source设置接口地址,dataType设置响应数据类型,data请求参数设置。返回数据处理方法存放于success中,筛选关键字并设置到results数组中,最后返回给response中。minLength设置提示词最少需要查询的字符数量,delay

    JavaScript pour implémenter la fonction de recherche
    1. Ensuite, nous devons écrire du code via JavaScript pour implémenter la fonction de recherche. Ajoutez le code suivant dans la balise script :
    rrreee

    Tout d'abord, récupérez le champ de recherche et les composants du formulaire via la méthode document.getElementById. Ensuite, ajoutez une fonction de rappel à l'événement onsubmit du composant de formulaire pour empêcher le comportement de soumission par défaut du formulaire. Dans la fonction de rappel, obtenez la valeur du texte dans la zone de recherche, utilisez l'attribut window.location.href pour rediriger et collez la chaîne de requête dans l'adresse de recherche Baidu.

    🎜Il convient de noter que puisque la chaîne de requête peut contenir des caractères spéciaux, vous devez utiliser la méthode encodeURIComponent pour encoder afin de garantir que les paramètres transmis dans l'URL sont conformes aux normes. 🎜
      🎜Embellissement de l'interface utilisateur🎜🎜🎜Afin de rendre la fonction de recherche plus belle et plus facile à utiliser, nous pouvons embellir le champ de recherche et les boutons via des styles CSS. Vous pouvez ajouter le code suivant : 🎜rrreee🎜Dans le code, nous avons ajouté des styles pour le champ de recherche et le bouton respectivement, y compris des attributs tels que la couleur d'arrière-plan, la bordure, les coins arrondis, l'ombre, la taille de la police, etc. De plus, le bouton change de couleur au survol de la souris, ajoutant de l'interactivité. 🎜
        🎜Réaliser la complétion automatique🎜🎜🎜En plus de la fonction de recherche de base, nous pouvons également implémenter la complétion automatique des mots-clés de requête via JavaScript. Une fois que l'utilisateur a saisi quelques lettres, les mots-clés de recherche correspondants seront affichés en fonction du contenu saisi. 🎜🎜Nous pouvons utiliser la bibliothèque tierce jquery-ui pour réaliser la fonction de complétion automatique des entrées. La maintenance du code sera également plus facile. 🎜rrreee🎜Nous avons emprunté l'interface fournie par Baidu pour proposer des mots-clés. Il a été constaté que l'identifiant de la zone de saisie utilise la fonction de saisie semi-automatique du framework jqueryUI pour implémenter l'association de mots clés. Parmi eux, source définit l'adresse de l'interface, dataType définit le type de données de réponse et data définit les paramètres de la requête. La méthode de traitement des données renvoyée est stockée dans success, filtre les mots-clés et les définit dans le tableau results, et enfin les renvoie à response. minLength définit le nombre minimum de caractères qui doivent être interrogés pour le mot d'invite, et delay définit le temps de retard de la demande de requête. 🎜🎜🎜Résumé🎜🎜🎜Cet article prend la recherche Baidu comme exemple pour présenter comment utiliser JavaScript pour implémenter des fonctions de recherche de base et des fonctions de saisie semi-automatique. Bien sûr, il ne s'agit que d'une simple implémentation. La recherche Baidu implémente plus que les deux fonctions ci-dessus, mais également des recommandations populaires, des recherches associées et d'autres fonctions, qui nécessitent un apprentissage et une amélioration continus dans la pratique. Dans le même temps, des fonctions de recherche plus puissantes peuvent être obtenues en combinant d’autres technologies et frameworks front-end. 🎜

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal