jquery ui autocomplete change/close event

Question

I am using jQuery UI autocomplete in one of my project.

my purpose

i want that whenever user leaves the textbox on which the autocomplete box appears , the handler will check that the whatever value user entered in the textbox must be one of the value from the source array of the autocomplete box, if it is no then handler will prompt an error and set focus again to this textbox.

For example

var customerNames = ['CA','BA','DA','AA'];

$('#customer').autocomplete({
     source: customerNames,
     change : function(event,ui){
         // handles event
     }
});

now suppose customer entered value does not exactly match (case insensitive) any of the value from the array then it prompts the error.

it should works fine but only when the user changes some value , suppose as a user i put only a in the customer textbox and then blur the textbox the handler prompt me the message , set focus back to customer textbox , then if i again blur from it the change/close event will not fire as per the jQuery doc because the value of the textbox is not changed.

My Question

how can i override the default behaviour of change/close event so then they will be triggered every time irrespective of the changes made by the user ?

OR

any other way to accomplish my goal ?

please feel free to ask me questions.

Updated on 05-JULY-2013

based on the @roasted comment i implement my solution as the following. please give me any suggestions if anybody has about.

$('#customer').autocomplete( {
                        source : function(request, resolve) {
                            // fetch new values with request.term
                            resolve(customerNames);
                        }
                    });// ends customer autocomplete

                   $("#customer").blur(function(){

                        var inputText = this.value;

                        if(inputText === '' || inputText.length == 0){
                            return;
                        }

                        if(checkAvailable(inputText,customerNames)){
                            return;
                        }else{
                            alert(" you have to select one of the value \n from given box.");
                                setTimeout(function(){
                                    $('#customer').val('');
                                    $('#customer').focus();         
                                },10);
                        }
                   });// ends customer blur

and i have slightly modified following function

function checkAvailable(term,availableTags) {

    var length = term.length,
         term = term.toLowerCase();

     for (var i = 0, z = availableTags.length; i < z; i++)
     if (availableTags[i].toLowerCase() === term) return true;


     return false;
 }

Thanks Mihir

You could use a kind of "mustmatch" option like there: stackoverflow.com/a/17190587/1414562 Link point to a multiple values autocomplete but can be applied for a classic autocomplete without problem — A. Wolff
– A. Wolff, Commented Jul 4, 2013 at 18:38
@roasted i have updated question,your answer helps me a lot please post answer here so i can accept it. and share your thoughts about my implementation. thanks — Mihir
– Mihir, Commented Jul 5, 2013 at 8:29

A. Wolff · Accepted Answer · 2013-07-05 09:10:36Z

1

You van use a kind of mustmatch option, here using a checkAvailable method:

 function checkAvailable(term) {
     var length = term.length,
         chck = false,
         term = term.toLowerCase();
     for (var i = 0, z = availableTags.length; i < z; i++)
     if (availableTags[i].substring(0, length).toLowerCase() === term) return true;


     return false;
 }

Following your edit, i just rewrite a little your blur handler:

$("#customer").blur(function () {

    var self = this,
        inputText = self.value;

    if ($.trim(inputText === '') || checkAvailable(inputText, customerNames)) return;


    alert(" you have to select one of the value \n from given box.");
    setTimeout(function () {
        $(self).val('').focus();
    }, 10);

}); // ends customer blur

answered Jul 5, 2013 at 9:10

A. Wolff

74.4k9 gold badges98 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Mihir Over a year ago

thanks for your answer, now i am getting very strange behaviour of autocomplete , whatever i enter in the textbox the values of the autocomplete box does not change.

A. Wolff Over a year ago

Could you provide a link where to reproduce your issue?

Mihir Over a year ago

I will upload it tomorrow and give you the ink.

Collectives™ on Stack Overflow

jquery ui autocomplete change/close event

my purpose

For example

My Question

Updated on 05-JULY-2013

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

my purpose

For example

My Question

Updated on 05-JULY-2013

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related