jQuery AJAX在页面加载时加载json内容,宁愿在搜索框中输入时加载json内容
我不确定为什么会发生这种情况,但是当我的页面加载时,会立即为搜索结果发出XHR请求。它对用户是不可见的,但它加载了相当大的json数据块。jQuery AJAX在页面加载时加载json内容,宁愿在搜索框中输入时加载json内容
这里是我的代码:
$.ajax({
type: "POST",
url: "http://localhost:8888/index.php/ajax/get_client",
dataType: "json", data: "{}",
success: function(data) {
$('#search').autocomplete({
source:data,
minLength:2,
delay:0,
appendTo:'header',
selectFirst:true,
select:function(event, ui) {
$("input#search").val(ui.item.value);
$("#search").closest('form').submit();
}
});
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert(errorThrown);
}
});
我怎样才能使它所以JSON数据仅要求当用户在输入#搜索框?
看起来要加载列表自动完成的结果,然后初始化只有当用户开始输入的自动完成插件。为此,如果结果尚未加载,则将搜索框绑定到搜索框,然后加载搜索结果并初始化插件。
$(document).ready(function(){
var searchInput = $("input#search");
function loadData(onSuccess){
$.ajax({
type: "POST",
url: "http://localhost:8888/index.php/ajax/get_client",
dataType: "json", data: "{}",
success: onSuccess,
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert(errorThrown);
}
});
}
function initializeAutocomplete(data){
searchInput.addClass('loaded').autocomplete({
source:data,
minLength:2,
delay:0,
appendTo:'header',
selectFirst:true,
select:function(event, ui) {
searchInput.val(ui.item.value).closest('form').submit();
}
});
}
searchInput.keyup(function(){
if($(this).is(".loaded")) return;
loadData(initializeAutocomplete);
});
});
将ajax调用换成button.click()事件,或者如果您希望在用户输入时调用它,请将其放入textbox.keypress()事件中。
您需要将键入事件侦听器绑定到您的输入框。 如果你已经在HTML页面中插入了这段代码而没有事件监听器,代码将在页面加载后立即执行。
这也许应该工作:http://jsfiddle.net/XNbrX/
我没有测试它。
我不知道我是否理解你,但我认为你想在每次按键(真正关键)上运行这个代码来加载每次搜索框值的变化结果。 如果我是对的,请将您的代码放入“onkeyup”事件触发的函数中。
$('input#search-box').keyup(function() {
$.ajax({
type: "POST",
url: "http://localhost:8888/index.php/ajax/get_client",
dataType: "json", data: "{}",
success: function(data) {
$('#search').autocomplete({
source:data,
minLength:2,
delay:0,
appendTo:'header',
selectFirst:true,
select:function(event, ui) {
$("input#search").val(ui.item.value);
$("#search").closest('form').submit();
}
});
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert(errorThrown);
}
});
});
我以前试过这个,问题是每次按下按键时都会请求json。为上面的解决方案投票。 – dallen 2012-02-02 23:43:24
好的。我不明白你好:) – 2012-02-03 08:28:35
太棒了,谢谢。说得通。 – dallen 2012-02-02 23:42:32