CODEWITHSUNDEEP
jqueryjquery-uiautocomplete
Ivo
Ivo

Reputation: 2636

Jquery ui autocomplete force user to pick answere

I am using JQuery UI autocomplete. Everything works as expected, but when a user clicks next to the results it closes. Now I need a responsive of the user or there stuck on that part of the page.

So now my question, How to force the user to give a input and keep the results until the user clicks on a result?

Here you can see the behavior of jquery ui http://jsfiddle.net/6mz2B/

$("#customer-search").autocomplete({
    source: [{
        label: "Tom Smith",
        value: "1234"},
    {
        label: "Tommy Smith",
        value: "12321"}],
    minLength: 1,
    select: function(event, ui) {
        event.preventDefault();
        $("#customer-search").val(ui.item.label);
        $("#selected-customer").val(ui.item.label);
    },
    focus: function(event, ui) {
        event.preventDefault();
        $("#customer-search").val(ui.item.label);
    }
});

Upvotes: 1

Views: 64

Answers (1)

blgt
blgt

Reputation: 8205

If I understand your requirement correctly, you could make use of the underlying .show() and .hide() functions (all they do is change the css display property) to make sure that you only ever close the autocomplete menu after a select event.

$(elt).on("autocompleteclose", function() {
    $(this).autocomplete("widget").show();
});
$(elt).on("autocompleteselect", function() {
    $(this).autocomplete("widget").hide();
});

Eg. here: http://jsfiddle.net/ua64n/

HOWEVER note that this is strongarming the autocomplete functionality, and there is most likely a better (and less fragile) way to do it. Provide more details, and I'll try to suggest an alternative.

Upvotes: 1

Related Questions