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.
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>
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
指定了在新窗口中打开搜索结果。文本框的id
为search-input
,按钮的id
为search-button
,这两个id在后面的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); };
首先,通过document.getElementById
方法获取搜索框和表单组件。然后,为表单组件的onsubmit
事件添加一个回调函数,阻止表单默认的提交行为。在回调函数的里面,获取搜索框中的文本值,并使用window.location.href
属性进行重定向,把查询字符串拼接到百度搜索的地址中。
值得注意的是,由于查询字符串中可能包含特殊字符,需要使用encodeURIComponent
方法来进行编码,确保在URL中传递的参数符合标准。
为了让搜索功能更加美观、易于使用,我们可以通过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; }
代码中,我们为搜索框和按钮分别添加了样式,包含了背景色、边框、圆角、阴影、字体大小等属性。另外,按钮在鼠标悬停时颜色发生变化,增加了交互性。
除了基本的搜索功能,我们还可以通过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>
我们借用了百度提供的接口进行了关键字的提示。发现input输入框的id使用了jqueryUI框架的autocomplete函数来实现关键字联想。其中,source
设置接口地址,dataType
设置响应数据类型,data
请求参数设置。返回数据处理方法存放于success
中,筛选关键字并设置到results
数组中,最后返回给response
中。minLength
设置提示词最少需要查询的字符数量,delay
script
: 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.
encodeURIComponent
pour encoder afin de garantir que les paramètres transmis dans l'URL sont conformes aux normes. 🎜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!