jQuery Devbridge autocomplete - 从列表中强制选择

Question

我正在使用DevBridge jQuery自动完成，这工作正常，但我想强制用户从下拉列表中选择一个选项。

有没有办法做到这一点？

var airports = [
    { value: 'Manchester (MAN)' },
    { value: 'Bangkok (BKK)' }, 
    { value: 'New York (JFK)' }
];

$('#autocomplete').autocomplete({
    lookup: airports
});

Answer 1

我使用的功能是onInvalidateSelection

$("#MyField").autocomplete({
    onInvalidateSelection:function(){
        $("#MyField").val("");
    }
});

这对我来说最有效。

Answer 2

我是这样做的：

• 我将所选事件上的选定值保存到名为“ac-selected-value”的HTML元素属性中。
• 关注焦点我检查该值是否与保存的值相同，如果不清除该值

现在，我无法在此控件上找到“已安装”或“初始化”事件（我认为它们应该添加一个）所以我改变了启动自动完成的方式 - 我通过调用devBridgeAutocomplete和我自己的函数来实现附上一个焦点听众：

$.MyNamespace.fs.autocomplete = function (elems, options) {
    elems.devbridgeAutocomplete(options);
    elems.focusout(function (e) {
        var txt = $(this);
        if (txt.attr("ac-selected-value") !== txt.val()) {                
            txt.val("");               
        }            
    });
};


...

// Set AC defaults:
$.Autocomplete.defaults.autoSelectFirst = true;
$.Autocomplete.defaults.onSelect = function (suggestion) {        
    $(this).attr("ac-selected-value", suggestion.value);   // stash a valid value here     
};
...  //  I also use this, but this alone will not get you far:
$.Autocomplete.defaults.onInvalidateSelection = function () {
    $(this).val("");
};

然后，在某个地方，你创建一个这样的字段：

$.MyNamespace.fs.autocomplete($("#select-something"), {
    serviceUrl: 'some-url'
});

如果在某些元素上你不想限制列表，你就去经典：

$("#select-something").devbridgeAutocomplete({
    serviceUrl: 'some-url'
});

HTH