当用户在搜索框中输入内容时，我们可以使用jQuery中的keyup事件和延迟来实现实时搜索。下面是一个完整攻略，包括两个示例说明。
步骤1：创建HTML和CSS
首先，我们需要一个HTML和CSS以便在页面中显示一个搜索框和搜索结果。下面是一个示例HTML和CSS：
<!DOCTYPE html>
<html>
<head>
<title>jQuery Keyup and Delay Example</title>
<style>
.search-form {
width: 300px;
margin: 0 auto;
text-align: center;
}
.search-input {
width: 200px;
height: 30px;
padding: 5px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 5px;
}
.search-results {
margin-top: 10px;
text-align: left;
}
.search-result {
margin-bottom: 5px;
padding: 5px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="search-form">
<input type="text" class="search-input" placeholder="Search...">
<div class="search-results"></div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</body>
</html>
在这个示例中我们创建了一个搜索框，包括一个文本输入框和一个搜索结果区域。
步骤2：使用jQuery实现实时搜索
接下来，我们需要使用jQuery实现实时搜索。我们可以使用keyup事件和延迟来实现。下面是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<title>jQuery Keyup and Delay Example</title>
<style>
.search-form {
width: 300px;
margin: 0 auto;
text-align: center;
}
.search-input {
width: 200px;
height: 30px;
padding: 5px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 5px;
}
.search-results {
margin-top: 10px;
text-align: left;
}
.search-result {
margin-bottom: 5px;
padding: 5px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="search-form">
<input type="text" class="search-input" placeholder="Search...">
<div class="search-results"></div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
var delay = (function() {
var timer = 0;
return function(callback, ms) {
clearTimeout(timer);
timer = setTimeout(callback, ms);
};
})();
$(".search-input").keyup(function() {
var query = $(this).val();
delay(function() {
$.ajax({
url: "search.php",
type: "POST",
data: { query: query },
success: function(data) {
$(".search-results").html(data);
}
});
}, 500);
});
});
</script>
</body>
</html>
在这个示例中，我们使用keyup事件和延迟来实现实时搜索。当用户在搜索输入框中输入内容时，我们使用delay()方法延迟500毫秒，然后使用$.ajax()方法向服务器发送请求，获取搜索结果，并将结果显示在搜索结果区域中。
示例1：搜索本地数据
下面是一个示例，演示如何搜索本地数据：
<!DOCTYPE html>
<html>
<head>
<title>jQuery Keyup and Delay Example</title>
<style>
.search-form {
width: 300px;
margin: 0 auto;
text-align: center;
}
.search-input {
width: 200px;
height: 30px;
padding: 5px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 5px;
}
.search-results {
margin-top: 10px;
text-align: left;
}
.search-result {
margin-bottom: 5px;
padding: 5px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="search-form">
<input type="text" class="search-input" placeholder="Search...">
<div class="search-results"></div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
var data = [
"Apple",
"Banana",
"Cherry",
"Durian",
"Elderberry",
"Fig",
"Grape",
"Honeydew",
"Iced Tea",
"Jackfruit",
"Kiwi",
"Lemon",
"Mango",
"Nectarine",
"Orange",
"Papaya",
"Quince",
"Raspberry",
"Strawberry",
"Tangerine",
"Ugli Fruit",
"Vanilla",
"Watermelon",
"Xigua",
"Yellow Watermelon",
"Zucchini"
];
var delay = (function() {
var timer = 0;
return function(callback, ms) {
clearTimeout(timer);
timer = setTimeout(callback, ms);
};
})();
$(".search-input").keyup(function() {
var query = $(this).val();
delay(function() {
var results = [];
for (var i = 0; i < data.length; i++) {
if (data[i].toLowerCase().indexOf(query.toLowerCase()) !== -1) {
results.push(data[i]);
}
}
var html = "";
for (var j = 0; j < results.length; j++) {
html += "<div class='search-result'>" + results[j] + "</div>";
}
$(".search-results").html(html);
}, 500);
});
});
</script>
</body>
</html>
在这个示例中，我们使用一个本地数据数组来模拟搜索结果。当用户在搜索输入框中输入内容时，我们使用delay()方法延迟500毫秒，然后遍历数据数组，查找包含搜索关键字的数据，并将结果显示在搜索结果区域中。
示例2：搜索远程数据
下面是一个示例，演示如何搜索远程数据：
<!DOCTYPE html>
<html>
<head>
<title>jQuery Keyup and Delay Example</title>
<style>
.search-form {
width: 300px;
margin: 0 auto;
text-align: center;
}
.search-input {
width: 200px;
height: 30px;
padding: 5px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 5px;
}
.search-results {
margin-top: 10px;
text-align: left;
}
.search-result {
margin-bottom: 5px;
padding: 5px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="search-form">
<input type="text" class="search-input" placeholder="Search...">
<div class="search-results"></div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
var delay = (function() {
var timer = 0;
return function(callback, ms) {
clearTimeout(timer);
timer = setTimeout(callback, ms);
};
})();
$(".search-input").keyup(function() {
var query = $(this).val();
delay(function() {
$.ajax({
url: "search.php",
type: "POST",
data: { query: query },
success: function(data) {
$(".search-results").html(data);
}
});
}, 500);
});
});
</script>
</body>
</html>
在这个示例中，我们使用$.ajax()方法向服务器发送请求，获取搜索结果，并将结果显示在搜索结果区域中。
综上所述，使用keyup事件和延迟可以实现在用户输入时进行实时搜索。我们可以使用本地数据或远程数据来模拟或获取搜索结果。同时，我们还提供了两个示例，演示如何搜索本地数据以及如何搜索远程数据。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：如何在jQuery中使用keyup与延迟 - Python技术站
微信扫一扫 
支付宝扫一扫 