Jquery 无法使引导TypeAhead在key up事件中工作

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',

如果我在doc ready中单独运行typeahead,则运行良好:

$('#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是否会多次重新加载初始数据集,因此您可能需要进行一些更高级的配置来实现这一点——指定在运行时重复调用的远程源。祝你好运

我不太理解你根据函数表达式改变源代码的意思。你能举一个小例子来说明这会是什么样子吗?