JQuery Devbridge autocomplete - choosing strength from a list

Question

I am using DevBridge jQuery auto-complete, which works fine, but I want to force the user to select a parameter from the drop-down list.

Is there any way to do this?

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

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

Answer 1

Function used onInvalidateSelection

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

What worked best for me.

Answer 2

Here is how I did it:

• I store the selected value in the selected event in an attribute of the HTML element called "ac-selected-value".
• when focusing, I check if the value matches the saved one, and if not, clears the value

"" "" ( , ), - , 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'
});