JavaScript实现百度搜索

百变鹏仔 2个月前 (10-30) #前端问答

文章标签百度搜索

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属性进行重定向，把查询字符串拼接到百度搜索的地址中。

立即学习“Java免费学习笔记（深入）”；

值得注意的是，由于查询字符串中可能包含特殊字符，需要使用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实现百度搜索

javascript里怎么输入

网页关闭javascript

javascript怎么实现异步

javascript隐藏的元素显示属性

javascript要全部记住吗