Question

如果我在doc中单独运行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调用。

提前致谢

Answer 1

严格回答你的问题：这不会那样。当您在#near字段上调用.typeahead（）时，您正在初始化Typeahead。也就是说，你正在调用typeahead库，然后它会附加所有其他类型的侦听器和类以及挂在#near之外的DOM元素。如果您将此调用放入键盘事件中，则所有这些设置都会在每次按下时运行。你需要在keyup监听器之外移动typeahead（）调用 - 你只希望它运行一次。

但这并不是说你不能根据输入做出不同的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是否会多次重新加载初始数据集，因此您可能需要进行一些更好的配置才能使其工作 - 指定在运行时重复调用的远程源。祝你好运！

无法让Bootstrap TypeAhead在key up事件中工作

1 个答案: