js实现搜索栏效果

下面是详细的“JS实现搜索栏效果”的攻略：

1. 创建HTML结构

首先，我们需要在HTML文件中创建一个搜索栏的结构，通常包含一个输入框和一个搜索按钮，代码如下：

<div>
  <input type="text" id="search-input">
  <button id="search-btn">搜索</button>
</div>

2. 基本CSS样式

我们给输入框和按钮设置一些基本的CSS样式，以便于美化页面，并调整其尺寸、边框等属性。代码如下：

#search-input {
  width: 200px;
  height: 30px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 5px;
}

#search-btn {
  height: 40px;
  font-size: 16px;
  border: none;
  border-radius: 5px;
  background-color: #0089ff;
  color: #fff;
  padding: 5px 10px;
  margin-left: 10px;
}

3. 编写JS交互代码

我们使用JavaScript代码为搜索栏添加交互功能，这包括在输入框中输入关键字时实时更新搜索结果，点击搜索按钮时进行搜索，并显示搜索结果等。代码如下：

// 获取DOM元素
var searchInput = document.getElementById('search-input');
var searchBtn = document.getElementById('search-btn');

// 监听搜索按钮点击事件
searchBtn.onclick = function () {
  var searchText = searchInput.value;
  search(searchText);
};

// 监听输入框输入事件
searchInput.oninput = function () {
  var searchText = searchInput.value;
  updateSearchResult(searchText);
};

// 更新搜索结果
function updateSearchResult(searchText) {
  // TODO: 实时更新搜索结果显示
}

// 执行搜索
function search(searchText) {
  // TODO: 执行搜索操作，并渲染搜索结果
}

其中，searchInput和searchBtn是通过document.getElementById方法获取到的输入框和按钮元素。当点击搜索按钮时，会调用search函数执行搜索操作，传入当前输入框中的文本值。当输入框中的文本值发生改变时，会调用updateSearchResult函数实时更新搜索结果的显示。

4. 实现示例一：基本搜索功能

我们先来实现一个基本的搜索功能，当用户在输入框中输入关键字并点击搜索按钮时，会在页面上直接显示搜索结果。代码如下：

function search(searchText) {
  // 模拟搜索结果数据
  var resultList = ['搜索结果1', '搜索结果2', '搜索结果3'];

  // 清空搜索结果列表
  var resultArea = document.getElementById('search-result');
  resultArea.innerHTML = '';

  // 遍历搜索结果，将其添加到页面上
  for (var i = 0; i < resultList.length; i++) {
    var li = document.createElement('li');
    li.innerText = resultList[i];
    resultArea.appendChild(li);
  }
}

在search函数中，我们模拟了一个搜索结果数组，将其遍历后添加到页面上。搜索结果将显示在id为search-result的列表中。

5. 实现示例二：实时搜索

上一示例中，我们只是将搜索结果直接显示在页面上。接下来，我们将完成实时搜索的功能，即当用户在输入框中输入关键字时，即时更新搜索结果。代码如下：

function updateSearchResult(searchText) {
  // 模拟搜索结果数据
  var resultList = ['搜索结果1', '搜索结果2', '搜索结果3'];

  // 清空搜索结果列表
  var resultArea = document.getElementById('search-result');
  resultArea.innerHTML = '';

  // 遍历搜索结果，将其添加到页面上
  for (var i = 0; i < resultList.length; i++) {
    if (resultList[i].indexOf(searchText) !== -1) {
      var li = document.createElement('li');
      li.innerText = resultList[i];
      resultArea.appendChild(li);
    }
  }
}

在updateSearchResult函数中，我们模拟了一个搜索结果数组，并遍历它。当文本框中的关键字存在于搜索结果中时，将其添加到页面上。若不符合条件，则不显示。

总结

以上便是JS实现搜索栏效果的完整攻略，包括创建HTML结构、基本CSS样式与交互代码。并且还提供了两个代码示例，解释了基本搜索与实时搜索功能的实现。希望这个攻略可以帮助到你。