jquery搜索框

jQuery 实现搜索框功能

使用 jQuery 可以快速实现一个交互式的搜索框功能，包括自动补全、动态过滤等功能。以下是一个完整的实现示例。

HTML 结构

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

<div class="search-container">
  <input type="text" id="search-input" placeholder="输入关键词搜索...">
  <button id="search-button">搜索</button>
  <div id="search-results"></div>
</div>

jQuery 实现基础搜索

通过监听输入框事件或按钮点击事件触发搜索逻辑：

$(document).ready(function() {
  $('#search-button').click(function() {
    const query = $('#search-input').val().trim();
    if (query) {
      performSearch(query);
    }
  });

  $('#search-input').keypress(function(e) {
    if (e.which === 13) {  // 回车键触发
      $('#search-button').click();
    }
  });
});

function performSearch(query) {
  // 模拟异步搜索（实际项目中替换为AJAX请求）
  $('#search-results').html(`<p>正在搜索: ${query}</p>`);

  // 示例：过滤本地数据
  const mockData = ["苹果", "香蕉", "橙子", "西瓜"];
  const results = mockData.filter(item => item.includes(query));

  if (results.length) {
    $('#search-results').html(`<ul>${
      results.map(item => `<li>${item}</li>`).join('')
    }</ul>`);
  } else {
    $('#search-results').html('<p>无匹配结果</p>');
  }
}

实现自动补全

添加输入时的自动补全功能（使用 jQuery UI Autocomplete）：

// 需先引入jQuery UI库
$('#search-input').autocomplete({
  source: function(request, response) {
    // 实际项目中使用AJAX获取数据
    const mockData = ["北京", "上海", "广州", "深圳"];
    const results = mockData.filter(item => 
      item.toLowerCase().includes(request.term.toLowerCase())
    );
    response(results);
  },
  minLength: 1  // 输入至少1个字符后触发
});

动态高亮匹配文本

在搜索结果中高亮显示匹配的关键词：

function highlightText(text, query) {
  const regex = new RegExp(query, 'gi');
  return text.replace(regex, match => `<span class="highlight">${match}</span>`);
}

// 在performSearch函数中使用：
const results = mockData.filter(item => item.includes(query));
$('#search-results').html(`<ul>${
  results.map(item => `<li>${highlightText(item, query)}</li>`).join('')
}</ul>`);

样式优化

添加基础CSS样式增强用户体验：

.search-container {
  max-width: 600px;
  margin: 20px auto;
}
#search-input {
  width: 70%;
  padding: 8px;
}
#search-button {
  padding: 8px 15px;
}
.highlight {
  background-color: yellow;
  font-weight: bold;
}
.ui-autocomplete {
  max-height: 200px;
  overflow-y: auto;
}

实际项目集成

在实际项目中，通常需要替换为真实的AJAX请求：

function performSearch(query) {
  $.ajax({
    url: '/api/search',
    method: 'GET',
    data: { q: query },
    success: function(data) {
      // 处理返回的数据
    },
    error: function() {
      $('#search-results').html('<p>搜索失败，请重试</p>');
    }
  });
}