jquery 搜索框

jQuery 搜索框实现方法

基本HTML结构

创建一个简单的搜索框HTML结构，包含输入框和搜索按钮：

<div class="search-container">
  <input type="text" id="search-input" placeholder="搜索...">
  <button id="search-button">搜索</button>
</div>

基础搜索功能

使用jQuery监听按钮点击事件，获取输入框内容并执行搜索：

$(document).ready(function() {
  $('#search-button').click(function() {
    const searchTerm = $('#search-input').val();
    if(searchTerm.trim() !== '') {
      // 执行搜索逻辑
      alert('正在搜索: ' + searchTerm);
    }
  });
});

实时搜索功能

添加输入框的keyup事件监听，实现输入时实时搜索：

$('#search-input').keyup(function() {
  const searchTerm = $(this).val();
  if(searchTerm.length > 2) {  // 至少输入3个字符才搜索
    // 执行实时搜索
    console.log('实时搜索:', searchTerm);
  }
});

搜索结果显示

创建一个区域显示搜索结果，并更新DOM：

<div id="search-results"></div>

function displayResults(results) {
  const $resultsContainer = $('#search-results');
  $resultsContainer.empty();

  if(results.length === 0) {
    $resultsContainer.append('<p>没有找到匹配的结果</p>');
    return;
  }

  $.each(results, function(index, item) {
    $resultsContainer.append(`<div class="result-item">${item.title}</div>`);
  });
}

搜索建议功能

实现搜索框下拉建议功能：

$('#search-input').keyup(function() {
  const searchTerm = $(this).val();

  if(searchTerm.length > 1) {
    $.get('/api/suggestions', {q: searchTerm}, function(data) {
      showSuggestions(data.suggestions);
    });
  }
});

function showSuggestions(suggestions) {
  const $suggestions = $('#search-suggestions');
  $suggestions.empty();

  $.each(suggestions, function(index, suggestion) {
    $suggestions.append(`<div class="suggestion">${suggestion}</div>`);
  });

  $suggestions.show();
}

样式增强

添加CSS样式美化搜索框：

.search-container {
  position: relative;
  width: 300px;
  margin: 20px auto;
}

#search-input {
  width: 70%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px 0 0 4px;
}

#search-button {
  width: 30%;
  padding: 10px;
  background: #2196F3;
  color: white;
  border: none;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
}

#search-suggestions {
  position: absolute;
  width: 70%;
  border: 1px solid #ddd;
  background: white;
  display: none;
}

.suggestion {
  padding: 8px;
  cursor: pointer;
}

.suggestion:hover {
  background: #f5f5f5;
}

高级功能：防抖处理

使用防抖技术优化实时搜索性能：

let searchTimer;

$('#search-input').keyup(function() {
  clearTimeout(searchTimer);

  searchTimer = setTimeout(function() {
    const searchTerm = $('#search-input').val();
    if(searchTerm.length > 2) {
      performSearch(searchTerm);
    }
  }, 500);  // 延迟500毫秒执行
});

function performSearch(term) {
  // 实际搜索逻辑
}

与后端API交互

通过AJAX与后端API交互获取搜索结果：

function performSearch(term) {
  $.ajax({
    url: '/api/search',
    method: 'GET',
    data: { q: term },
    success: function(response) {
      displayResults(response.results);
    },
    error: function() {
      alert('搜索过程中发生错误');
    }
  });
}