动态搜索栏 Javascript

动态搜索栏是一个常见的网页功能，允许用户在输入框中输入关键字并自动更新结果。本文将介绍如何使用Javascript实现一个动态搜索栏。

HTML

首先需要一个输入框和一个用来展示搜索结果的容器。HTML代码如下：

<input type="text" id="search-box">
<div id="result-container"></div>

Javascript

动态搜索需要使用Javascript实时监听用户输入并执行Ajax请求。

首先，我们需要监听输入框的keyup事件。每当用户在输入框中输入一个字符，事件就会触发。在事件处理函数中，我们将获取输入框的内容并执行Ajax请求。

const searchBox = document.getElementById('search-box');
const resultContainer = document.getElementById('result-container');

searchBox.addEventListener('keyup', function(event) {
  const keyword = event.target.value;

  // Execute Ajax request
});

接下来，我们需要发送Ajax请求到服务器以获取搜索结果。在请求成功后，我们将解析服务器响应并更新结果容器。

const searchBox = document.getElementById('search-box');
const resultContainer = document.getElementById('result-container');

searchBox.addEventListener('keyup', function(event) {
  const keyword = event.target.value;

  // Execute Ajax request
  const request = new XMLHttpRequest();
  request.open('GET', '/search?q=' + keyword);
  request.onload = function() {
    const response = JSON.parse(request.responseText);
    const results = response.results;

    // Update results container
    resultContainer.innerHTML = '';
    for (const result of results) {
      const resultElement = document.createElement('div');
      resultElement.textContent = result.title;
      resultContainer.appendChild(resultElement);
    }
  };
  request.send();
});

注意，我们在每次更新结果容器前都清空容器的内容。这可以防止结果列表无限增长，影响性能和用户体验。

CSS

最后，我们需要一些CSS样式来美化搜索栏和结果容器。

#search-box {
  width: 200px;
  padding: 10px;
  font-size: 16px;
}

#result-container {
  border: 1px solid #ccc;
  max-height: 200px;
  overflow-y: scroll;
  padding: 10px;
}

#result-container div {
  margin: 5px 0;
  padding: 5px;
  border-radius: 3px;
  background-color: #f8f8f8;
  cursor: pointer;
}

#result-container div:hover {
  background-color: #ccc;
}

这些样式将为搜索栏和结果容器提供基本的样式，并使搜索结果更易于阅读。

现在，当用户在搜索栏中输入关键字时，结果容器将自动更新以显示匹配的结果。