javascript实现简单搜索功能

要实现简单的搜索功能，需要使用JavaScript编写代码实现。具体步骤如下：

第一步：获取搜索框元素

使用JavaScript代码获取搜索框输入的内容，代码如下：

var input = document.getElementById('searchInput');
var keyword = input.value;

以上代码中，searchInput是指页面中搜索框的ID，我们通过document.getElementById()方法获取输入框元素，再通过.value属性获取用户输入的搜索关键字。

第二步：遍历搜索结果

我们需要遍历页面上的所有结果，找到与搜索关键字匹配的结果。我们可以通过嵌套的for循环实现遍历。

var elements = document.getElementsByClassName('searchResult');
for (var i = 0; i < elements.length; i++) {
  var element = elements[i];
  var text = element.textContent || element.innerText;
  if (text.indexOf(keyword) >= 0) {
    element.style.display = '';
  } else {
    element.style.display = 'none';
  }
}

以上代码中，我们首先通过.getElementsByClassName()方法获取所有搜索结果元素，然后遍历每一个元素。对于每一个元素，我们通过.textContent或.innerText获取文本内容，再使用indexOf()方法判断搜索关键字是否出现在文本中。如果出现，则将该元素的style.display属性设为''（显示），否则设为'none'（隐藏）。

示例说明一

下面是一个简单的HTML页面，实现了一个搜索框和一些搜索结果。我们要在搜索框中输入关键字，然后通过JavaScript动态显示/隐藏匹配的搜索结果：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>简单搜索功能示例</title>
  <style>
    .searchResult {
      margin-bottom: 10px;
      display: none;
    }
  </style>
</head>
<body>
  <input type="text" id="searchInput" placeholder="请输入关键字">
  <br>
  <div class="searchResult">
    <h3>搜索结果1</h3>
    <p>这是搜索结果1的详细内容。</p>
  </div>
  <div class="searchResult">
    <h3>搜索结果2</h3>
    <p>这是搜索结果2的详细内容。</p>
  </div>
  <div class="searchResult">
    <h3>搜索结果3</h3>
    <p>这是搜索结果3的详细内容。</p>
  </div>
  <script>
    var input = document.getElementById('searchInput');
    input.oninput = function() {
      var keyword = input.value;
      var elements = document.getElementsByClassName('searchResult');
      for (var i = 0; i < elements.length; i++) {
        var element = elements[i];
        var text = element.textContent || element.innerText;
        if (text.indexOf(keyword) >= 0) {
          element.style.display = '';
        } else {
          element.style.display = 'none';
        }
      }
    };
  </script>
</body>
</html>

示例说明二

我们还可以利用jQuery库来简化上述代码，使用filter()方法过滤搜索结果，并使用toggle()方法显示/隐藏匹配的结果。下面代码是使用jQuery实现相同功能的示例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>简单搜索功能示例（jQuery版本）</title>
  <style>
    .searchResult {
      margin-bottom: 10px;
      display: none;
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function() {
      $('#searchInput').on('input', function() {
        var keyword = $(this).val();
        $('.searchResult').filter(function(){
          var text = $(this).text();
          return text.indexOf(keyword) >= 0;
        }).toggle();
      });
    });
  </script>
</head>
<body>
  <input type="text" id="searchInput" placeholder="请输入关键字">
  <br>
  <div class="searchResult">
    <h3>搜索结果1</h3>
    <p>这是搜索结果1的详细内容。</p>
  </div>
  <div class="searchResult">
    <h3>搜索结果2</h3>
    <p>这是搜索结果2的详细内容。</p>
  </div>
  <div class="searchResult">
    <h3>搜索结果3</h3>
    <p>这是搜索结果3的详细内容。</p>
  </div>
</body>
</html>

以上代码中，我们在页面头部引入了jQuery库，并在页面底部通过.ready()方法绑定了一个搜索框输入事件。在事件处理函数中，我们使用val()方法获取搜索关键字，使用filter()方法过滤搜索结果，并使用toggle()方法显示/隐藏匹配的结果。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：javascript实现简单搜索功能 - Python技术站

javascript实现简单搜索功能

第一步：获取搜索框元素

第二步：遍历搜索结果

示例说明一

示例说明二

相关文章