jQuery 是一个快速、小巧且功能丰富的 JavaScript 库,它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。文本框输入查询列表通常是指在用户输入文本时,动态显示与输入内容匹配的选项列表。
以下是一个简单的 jQuery 文本框输入查询列表的示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery 输入查询列表</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.suggestions {
display: none;
position: absolute;
background-color: white;
border: 1px solid #ccc;
width: 200px;
}
.suggestions div {
padding: 5px;
cursor: pointer;
}
.suggestions div:hover {
background-color: #eee;
}
</style>
</head>
<body>
<input type="text" id="search-box" placeholder="输入查询...">
<div class="suggestions" id="suggestions"></div>
<script>
$(document).ready(function() {
const data = ["Apple", "Banana", "Cherry", "Date", "Elderberry", "Fig", "Grape"];
$('#search-box').on('input', function() {
const query = $(this).val().toLowerCase();
const suggestions = data.filter(item => item.toLowerCase().includes(query));
showSuggestions(suggestions);
});
function showSuggestions(suggestions) {
const suggestionsDiv = $('#suggestions');
suggestionsDiv.empty();
if (suggestions.length > 0) {
suggestions.forEach(suggestion => {
suggestionsDiv.append(`<div>${suggestion}</div>`);
});
suggestionsDiv.show();
} else {
suggestionsDiv.hide();
}
}
$(document).on('click', function(event) {
if (!$(event.target).closest('#search-box').length && !$(event.target).closest('#suggestions').length) {
$('#suggestions').hide();
}
});
});
</script>
</body>
</html>
function debounce(func, wait) {
let timeout;
return function(...args) {
clearTimeout(timeout);
timeout = setTimeout(() => func.apply(this, args), wait);
};
}
$('#search-box').on('input', debounce(function() {
const query = $(this).val().toLowerCase();
const suggestions = data.filter(item => item.toLowerCase().includes(query));
showSuggestions(suggestions);
}, 300));
通过以上方法,可以有效解决输入延迟的问题。
没有搜到相关的文章