javascriptjqueryjquery-ui-autocomplete

jQuery autocomplete: does not allow other text


I am using the below code to create auto complete extender in my grid. This is working fine. Now i need to add the listed dropdown list only otherwise the text box should be blank. Is this possible means please help me to do this.

dataInit: function (e) {
    $(e).autocomplete({
        source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"],
        minLength: 1,
        focus: function (event, ui) {
            $(e).val(ui.item.label);
        },
        select: function (event, ui) {
           $(e).val(ui.item.label);
           $("input#FLD_WS_ID").val(ui.item.value);
        }
    });
}

Solution

  • You can use the change event :

    Triggered when the field is blurred, if the value has changed.

    and if the element is not present in the autocomplete list, clear it.

    Sample code:

    $("#tags").autocomplete({
        source: availableTags,
        minLength: 1,
        focus: function (event, ui) {
            $(event).val(ui.item.label);
        },
        select: function (event, ui) {
            $(event).val(ui.item.label);
            //$("input#FLD_WS_ID").val(ui.item.value);
        },
        change: function (event, ui) {
            if (!ui.item) {
                $(this).val('');
            }
        }
    });
    

    Demo: http://jsfiddle.net/IrvinDominin/tLNKv/