如何使用Jquery AJAX创建实时搜索,我使用keypress或keyup事件来循环查询,但如果我输入3个字符或更多字符,AJAX将执行3次或更多次。
我的表单:
<input class="keyword-search" type="text" name="s" autocomplete="off" placeholder="Where do you want to go?">
这是我的AJAX:
<script>
jQuery(document).ready(function(){
(function($){
$(".keyword-search").keypress(function(){
var keyword = $(this).val();
$(".search-appear").empty();
$.ajax({
type: "post",
url: "<?php echo admin_url( 'admin-ajax.php' ); ?>",
data: { action: 'get_tour', keyword: keyword },
beforeSend: function() {$("#loading").fadeIn('slow');},
success: function(data) {
$("#loading").fadeOut('slow');
$(".search-appear").append(data);
}
});
});
})(jQuery);
});
</script>
以下是我的演示功能:
function get_tour()
echo 'Do something!';
?>
<?php die(); }
当我键入3个字符时,这是结果: type 3 characters 我键入2个字符: type 2 characters 无论有多少按键,谁能帮助我工作一次。或者无论如何它工作正常!非常感谢!!
答案 0 :(得分:0)
将ajax添加到ajaxFunction,当用户在搜索中键入或粘贴内容时,如果值大于3,这将起作用。
ajaxFunction将是这样的一些东西:
var ajaxFunction = function( data ) {
$.ajax({
type: "post",
url: "<?php echo admin_url( 'admin-ajax.php' ); ?>",
data: { action: 'get_tour', keyword: data },
beforeSend: function() {$("#loading").fadeIn('slow');},
success: function(data) {
$("#loading").fadeOut('slow');
$(".search-appear").append(data);
}
});
}
}
$(document).ready(function(){
var ajaxFunction = function( val ){
$('#out').text('Val: ' + val);
}
$('#search').on('keyup paste',function(){
if(this.value.length >= 3)
ajaxFunction(this.value);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="search">
<div id="out"></div>