Heim > Artikel > Web-Frontend > JavaScript implementiert die Baidu-Suche

JavaScript implementiert die Baidu-Suche

王林Original: 2023-05-26 20:16:061594Durchsuche

JavaScript ist eine interpretierte Programmiersprache auf hohem Niveau, die häufig in der Webentwicklung verwendet wird. Unter anderem kann JavaScript dazu führen, dass Webseiten dynamische Effekte, Interaktivität und logische Funktionen haben. Die Baidu-Suche ist eine der allgemeinen Funktionen der Website. In diesem Artikel wird erläutert, wie die Baidu-Suche über JavaScript implementiert wird.

HTML-Struktur

Zuerst müssen Sie Komponenten wie das Suchfeld und die Schaltfläche „Senden“ in der HTML-Datei erstellen. Hier nehmen wir das Suchfeld auf Baidus Homepage als Beispiel:

<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>

Im Code stellt form die Formularkomponente dar und das Attribut action gibt die übermittelte Adresse an (hier ist die Adresse der Baidu-Suche), target gibt an, dass die Suchergebnisse in einem neuen Fenster geöffnet werden. Die id des Textfelds ist search-input und die id der Schaltfläche ist search-button. Diese beiden IDs werden im folgenden JavaScript-Code verwendet. form表示表单组件，action属性指定了提交的地址（这里是百度搜索的地址），target指定了在新窗口中打开搜索结果。文本框的id为search-input，按钮的id为search-button，这两个id在后面的JavaScript代码中会用到。

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中传递的参数符合标准。

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;
}

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

实现自动补全

除了基本的搜索功能，我们还可以通过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

Als nächstes müssen wir Code über JavaScript schreiben, um die Suchfunktion zu implementieren. Fügen Sie den folgenden Code im Tag script hinzu:

Rufen Sie zunächst das Suchfeld und die Formularkomponenten über die Methode document.getElementById ab. Fügen Sie dann eine Rückruffunktion zum onsubmit-Ereignis der Formularkomponente hinzu, um das standardmäßige Übermittlungsverhalten des Formulars zu verhindern. Rufen Sie in der Rückruffunktion den Textwert im Suchfeld ab, verwenden Sie das Attribut window.location.href zum Umleiten und fügen Sie die Abfragezeichenfolge in die Baidu-Suchadresse ein.

encodeURIComponent

source

dataType

data

success

results

response

minLength

delay

Das obige ist der detaillierte Inhalt vonJavaScript implementiert die Baidu-Suche. 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：So aktivieren Sie Javascript in FirefoxNächster Artikel：So aktivieren Sie Javascript in Firefox

In Verbindung stehende Artikel

Mehr sehen