Jquery 无法使引导TypeAhead在key up事件中工作
如果我在doc ready中单独运行typeahead,则运行良好:Jquery 无法使引导TypeAhead在key up事件中工作,jquery,twitter-bootstrap,Jquery,Twitter Bootstrap,如果我在doc ready中单独运行typeahead,则运行良好: $('#near').typeahead({ source: function(query, process) { $.ajax({ url: '/ajax/ajaxcall.php', type: 'POST', data: 'query=' + query, dataType: 'JSON',
$('#near').typeahead({
source: function(query, process) {
$.ajax({
url: '/ajax/ajaxcall.php',
type: 'POST',
data: 'query=' + query,
dataType: 'JSON',
async: true,
success: function(data) {
process(data);
}
});
},
minLength:3,
items:100
});
如果我将其包装在keyup事件中,它将不起作用:
$('#near').keyup(function(){
console.log('keyup value is ' + $('#near').val());
$('#near').typeahead({
source: function(query, process) {
$.ajax({
url: '/ajax/ajaxcall.php',
type: 'POST',
data: 'query=' + query,
dataType: 'JSON',
async: true,
success: function(data) {
process(data);
}
});
},
minLength:3,
items:100
});
});
我的问题是,为什么即使我看到事件触发并更新控制台中的值,它仍会在事件处理程序中停止工作?还有一种方法可以让它在keyup事件的上下文中工作。最后,我想检查这个值是否是一个数字或是键向上的字符串,并根据答案调用不同的typeahead ajax调用
提前感谢您严格回答您的问题:这样不行。当你在近场呼叫.typeahead时,你正在初始化typeahead。也就是说,您正在调用typeahead库,该库随后会附加挂在near上的各种其他侦听器、类和DOM元素。如果您将此呼叫置于keyup事件中,则每次按下都会运行所有设置。您需要将typeahead调用移到keyup侦听器之外-您只希望它运行一次 但这并不是说不能根据输入进行不同的AJAX调用。如果您想改变typeahead在运行时使用的源代码,您应该能够将其指向返回两个不同函数的函数表达式。它返回哪一个可能取决于在keyup侦听器中更改的值。可能看起来像这样:
// This is declared outside of of the keyup listener function and the
// sourceSwitcher, so that it is available to both. We're assuming string,
// but we'll check on each keyup.
var nearIsInteger = false;
// This matches the user input against a crude regex- if the input consists
// of nothing but digits, it sets nearIsInteger to true.
$('#near').keyup(function(){
var userInput = $(this).val();
if (/^\d+$/.test(userInput)) {
nearIsInteger = true;
} else {
nearIsInteger = false;
}
});
// This is a function expression. Notice that it is not a simple declaration;
// the entire function is declared within a variable, which can be called at
// runtime when it is referenced (by appending empty parentheses). Of course,
// you'll need to make it return function expressions of your own- the return
// values here are just placeholder strings.
var sourceSwitcher = function(){
if (nearIsInteger) {
return "source function (ajax call) for integer input";
} else {
return "different source function for other strings";
}
};
// Here is your current typeahead initialization. You should now be able to set the remote source to call whichever
// function is being returned by the source switcher. Instead of the function you are currently specifying for source,
// call sourceSwitcher(), which should now return the appropriate one of your functions.
$('#near').typeahead({
source: function(query, process) {
$.ajax({
url: '/ajax/ajaxcall.php',
type: 'POST',
data: 'query=' + query,
dataType: 'JSON',
async: true,
success: function(data) {
process(data);
}
});
},
minLength:3,
items:100
});
不过,我不确定typeahead是否会多次重新加载初始数据集,因此您可能需要进行一些更高级的配置来实现这一点——指定在运行时重复调用的远程源。祝你好运 我不太理解你根据函数表达式改变源代码的意思。你能举一个小例子来说明这会是什么样子吗?