JQuery autocomplete event at a new value

Question

I have the following code:

container.autocomplete({
        minLength: 2,
        source: function(request, response) {
                $.ajax({
                    type : 'POST',
                    url: HOST + "/lib/gets/getjsonclients.php",
                    dataType: "json",
                    data: {
                        q: request.term
                    },
                    success: function(data) {
                        ajaxCache[cachedTerm] = data;
                        response($.map(data, function(item) {
                            return {
                                label: item.value,
                                value: item.value
                            }
                        }));
                    }
                });
        },
        select: function(event, ui) {
            alert(ui.item.value);
            this.close
        },

        //change: function(event, ui) {
        //   alert($(this).val());
        //}, 

        open: function() {
        },

        close: function() {
        }
 });

I want to catch the enter key event when I type a new value (other that which I already have in my select list).

I have tried using the .result event but I have an error: Uncaught TypeError: Object # has no method 'result' using the code:

    container.result(function(event, data, formatted) {
        alert($(this).val());
    });

The change: event is working OK but is fired only after I loose the focus on autocomplete and I need it to be done when I hit the enter key

Thank you for your answers.

Keeper · Accepted Answer · 2011-01-18 10:21:49Z

2

You should bind container to keypress and catch the enter key (not tested but should work):

$(container).keypress(function(event) {
    if(event.which == 13) {
        $(this).autocomplete('search');
    }
});

answered Jan 18, 2011 at 10:21

Keeper

3,5661 gold badge20 silver badges29 bronze badges

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

4 Comments

EKK Over a year ago

thanks, is OK now but the problem is now that when I hit enter the key on one of the values from the select list the event select is fired and then also the keypress event is fired. In this case I want only one of them to be fired. Do you have any idea how can I stop one of them? Or may be I can use a local variable to verify this.

Keeper Over a year ago

add after .autocomplete('search') : event.stopPropagation()

EKK Over a year ago

I have tried as you said and is not working... I have read about stopPropagation() that the method stops the bubbling of an event to parent elements, preventing any parent handlers from being notified of the event. However I use the same container for autocomplete and keypress like this: <input id="autocomplete" />. The question is how can I stop to fire one event after another from the same container, not child or parent html tags.

Keeper Over a year ago

I don't think there's a simple way to do this: you should try to rewrite your js taking into account that need (ie. change the way you attach the handler). May be you can try to track if the source function was called while pressing the enter key (use a var enterKey = false, set it to true inside keypress handler, check for true inside source function and finally, at the end of source function, set it to false.

EKK · Accepted Answer · 2011-01-18 10:41:01Z

I use this solution. However if there is a way to cancel the effect of one event while one was fired, and the activate again the event, please let me know.

  var oneEventFired = false;
  container.autocomplete({
        minLength: 2,
        source: function(request, response) {
                $.ajax({
                    type : 'POST',
                    url: HOST + "/lib/gets/getjsonclients.php",
                    dataType: "json",
                        data: {
                        q: request.term
                    },
                    success: function(data) {
                        ajaxCache[cachedTerm] = data;
                        response($.map(data, function(item) {
                            return {
                                label: item.value,
                                value: item.value
                            }
                        }));
                    }
                });
        },
        select: function(event, ui) {
            oneEventFired = true;
            alert(ui.item.value);
            this.close
        },    
        open: function() {
        },    
        close: function() {
        }
 })
 .keypress(function(e) {
        if (!oneEventFired) {
            // activate when the enter key is hit
            if (e.keyCode === 13) 
            {
                alert("key" + $(this).val());
            }
        } else {
            oneEventFired = false;
        }
 });

Thank you for your help!

Collectives™ on Stack Overflow

JQuery autocomplete event at a new value

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related