知识问答
如何用jQuery实现一个仿百度的搜索框效果？
2025-09-21 15:32:38
来源：互联网转载
``
javascript，$("#search").keyup(function() {， var query = $(this).val();， if (query.length >= 2) {， // 发送AJAX请求获取搜索结果并显示， }，});，``基于jQuery的仿百度搜索框效果代码
1. 引入必要的库和样式
在HTML文件的<head>标签内，引入jQuery库和必要的CSS样式：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>仿百度搜索框效果</title> <!-引入jQuery库 --> <ｓｃｒｉｐｔ src="https://code.jquery.com/jquery-3.6.0.min.js"></ｓｃｒｉｐｔ> <!-引入自定义样式 --> <link rel="stylesheet" href="styles.css"></head><body> <!-搜索框HTML结构 --> <p class="search-container"> <input type="text" id="search-input" placeholder="请输入搜索内容..."> <button id="search-btn">搜索</button> <p id="search-results" class="search-results"></p> </p> <!-引入自定义脚本 --> <ｓｃｒｉｐｔ src="ｓｃｒｉｐｔ.js"></ｓｃｒｉｐｔ></body></html>
2. CSS样式
创建一个名为styles.css的文件，添加以下样式：
body { font-family: Arial, sans-serif;}.search-container { margin: 50px auto; text-align: center;}#search-input { padding: 10px; width: 400px; border: 1px solid #ccc; border-radius: 4px;}#search-btn { padding: 10px 20px; background-color: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer; margin-left: 10px;}.search-results { margin-top: 20px;}3. JavaScript代码
创建一个名为ｓｃｒｉｐｔ.js的文件，添加以下代码：
$(document).ready(function() { // 获取搜索框元素 var $searchInput = $('#search-input'); var $searchResults = $('#search-results'); // 绑定搜索按钮点击事件 $('#search-btn').on('click', function() { var searchText = $searchInput.val(); if (searchText) { performSearch(searchText); } else { alert('请输入搜索内容'); } }); // 绑定回车键事件 $searchInput.on('keypress', function(event) { if (event.which === 13) { // 回车键的键码是13 $('#search-btn').click(); } }); // 执行搜索操作 function performSearch(query) { // 模拟搜索结果，实际项目中应替换为真实的API请求 var results = [ '结果1: ' + query, '结果2: ' + query, '结果3: ' + query ]; displayResults(results); } // 显示搜索结果 function displayResults(results) { $searchResults.empty(); // 清空之前的搜索结果 results.forEach(function(result) { $searchResults.append('<p>' + result + '</p>'); }); }});4. 相关问题与解答
问题1：如何在点击搜索按钮时清空搜索结果？
答：在performSearch函数开始处添加$searchResults.empty();代码，用于清空之前的搜索结果，这样在每次点击搜索按钮时，都会先清空之前的搜索结果，然后再显示新的搜索结果。
function performSearch(query) { $searchResults.empty(); // 清空之前的搜索结果 // ...其他代码}问题2：如何修改代码以支持自动补全功能？
答：要实现自动补全功能，可以使用jQuery UI的Autocomplete插件，需要在HTML文件中引入jQuery UI库和相应的CSS样式，然后在JavaScript代码中使用$.widget()方法初始化Autocomplete插件，并设置数据源，以下是修改后的代码：
<!-引入jQuery UI库和样式 --><link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"><ｓｃｒｉｐｔ src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></ｓｃｒｉｐｔ>
$(document).ready(function() { // ...其他代码 // 初始化Autocomplete插件 $('#search-input').autocomplete({ source: ['示例1', '示例2', '示例3'], // 设置数据源，实际项目中应替换为动态获取的数据 minLength: 1, // 设置最少输入字符数，为1表示至少输入一个字符才触发自动补全 ｓｅｌｅｃｔ: function(event, ui) { // 选择某一项时的回调函数 $searchInput.val(ui.item.value); // 将选择的值设置为输入框的值 } });});
下一篇：百度云如何同步云盘文件
