집 >웹 프론트엔드 >프런트엔드 Q&A >JavaScript는 Baidu 검색을 구현합니다.

JavaScript는 Baidu 검색을 구현합니다.

王林원래의: 2023-05-26 20:16:061675검색

JavaScript는 웹 개발에 널리 사용되는 고급 해석 프로그래밍 언어입니다. 그 중 자바스크립트는 웹페이지에 동적 효과, 상호작용성, 논리적 기능을 부여할 수 있습니다. Baidu 검색은 웹사이트의 일반적인 기능 중 하나입니다. 이 기사에서는 JavaScript를 통해 Baidu 검색을 구현하는 방법을 소개합니다.

HTML 구조

먼저 HTML 파일에 검색창, 제출 버튼 등의 구성 요소를 만들어야 합니다. 여기서는 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>

코드에서 form은 양식 구성 요소를 나타내고 action 속성은 제출된 주소를 지정합니다(여기서는 는 Baidu 검색 주소입니다. target은 검색 결과를 새 창에서 열도록 지정합니다. 텍스트 상자의 id는 search-input이고, 버튼의 id는 search-button입니다. 이 두 ID는 다음 JavaScript 코드에서 사용됩니다. 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를 통해 검색 기능을 구현하는 코드를 작성해야 합니다. script 태그에 다음 코드를 추가합니다.

먼저 document.getElementById 메소드를 통해 검색 상자와 양식 구성 요소를 가져옵니다. 그런 다음 양식 구성 요소의 onsubmit 이벤트에 콜백 함수를 추가하여 양식의 기본 제출 동작을 방지합니다. 콜백 함수에서 검색 상자의 텍스트 값을 얻고 window.location.href 속성을 사용하여 리디렉션한 다음 쿼리 문자열을 Baidu 검색 주소에 연결합니다.

encodeURIComponent

source

dataType

data

success

results

response

minLength

delay

위 내용은 JavaScript는 Baidu 검색을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：Firefox에서 자바스크립트를 활성화하는 방법다음 기사：Firefox에서 자바스크립트를 활성화하는 방법