JavaScript实现百度搜索-前端问答-PHP中文网

JavaScript实现百度搜索

王林

发布： 2023-05-26 20:16:06

原创

1637 人浏览过

JavaScript是一种高级的、解释型的编程语言，广泛应用于Web开发中。其中，JavaScript通过可以使网页具有动态效果、交互性和逻辑功能。百度搜索是网站常见的功能之一，本文将介绍如何通过JavaScript实现百度搜索。

HTML结构

首先，需要在HTML文件中建立搜索框和提交按钮等组件。这里我们以百度首页的搜索框为例：

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

登录后复制

代码中，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设置查询请求的延迟时间。

总结

本文以百度搜索为例，介绍了如何使用JavaScript实现基本的搜索功能和自动补全功能。当然了，这只是一个简单的实现，百度搜索的实现不止以上两个功能，还有热门推荐、相关搜索等等功能，需要在实践中持续不断地学习与完善。同时，结合其他前端技术与框架可以实现更多强大的搜索功能。

以上是JavaScript实现百度搜索的详细内容。更多信息请关注PHP中文网其他相关文章！