JavaScript实现百度搜索

前端2023-07-1246 人已阅来源:网络

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

  1. 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指定了在新窗口中打开搜索结果。文本框的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);
};

首先,通过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;
}

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

  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>

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

  1. 总结

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

以上就是JavaScript实现百度搜索的详细内容!