当前位置：首页 > jquery

jquery 搜索框

2026-04-08 04:29:11jquery

jQuery 实现搜索框功能

使用 jQuery 可以轻松实现搜索框的动态效果和交互功能。以下是一个常见的搜索框实现方法：

HTML 结构

jquery 搜索框

<input type="text" id="searchBox" placeholder="搜索...">
<div id="searchResults"></div>

CSS 样式

#searchBox {
  padding: 8px;
  width: 200px;
  border: 1px solid #ccc;
}

#searchResults {
  margin-top: 5px;
  border: 1px solid #ddd;
  display: none;
}

jQuery 代码

jquery 搜索框

$(document).ready(function() {
  $('#searchBox').on('keyup', function() {
    var searchTerm = $(this).val();

    if(searchTerm.length > 0) {
      $('#searchResults').show();

      // 这里可以添加AJAX请求来获取搜索结果
      $.ajax({
        url: 'search.php',
        method: 'POST',
        data: {term: searchTerm},
        success: function(response) {
          $('#searchResults').html(response);
        }
      });
    } else {
      $('#searchResults').hide();
    }
  });

  // 点击页面其他区域隐藏搜索结果
  $(document).on('click', function(e) {
    if(!$(e.target).closest('#searchBox, #searchResults').length) {
      $('#searchResults').hide();
    }
  });
});

实现自动完成功能

jQuery UI 提供了自动完成功能，可以更简单地实现搜索建议：

$(function() {
  $("#searchBox").autocomplete({
    source: function(request, response) {
      $.ajax({
        url: "search_suggestions.php",
        dataType: "json",
        data: {
          term: request.term
        },
        success: function(data) {
          response(data);
        }
      });
    },
    minLength: 2,
    select: function(event, ui) {
      // 处理选择项
    }
  });
});

实现即时搜索

对于不需要按回车键的即时搜索：

$('#searchBox').on('input', function() {
  var query = $(this).val();
  if(query.length >= 3) {
    performSearch(query);
  }
});

function performSearch(term) {
  $.get('/api/search', {q: term}, function(data) {
    // 处理返回的搜索结果
    displayResults(data);
  });
}