views:

109

answers:

1

Hello,

I am using jquery.autocomplete.js and jquery.apitags to select a few elements from a div (.ac_results) This works great, and I can select multiple elements etc. However the jquery-aptags plugin does only fire when enter is pressed. This might confuse some users if they use the mouse to click instead of the arrows/enter on the keyboard.

I think this is the code inside jquery.aptags that submits the tag.

//
// Hook to the keypress event.
//            
$(this).bind('keypress', {
    __c: __c
}, function (e) {

    var c = '';
    var i = 0;

    var v = $(this).val();

    if (e.keyCode == 13) {
        e.stopPropagation();
        e.preventDefault();
        __createSpans(this, v, e.data.__c, true);
    }

});

I am wondering if it is possible to call the method directly from a new event.

  $('.ac_results > ul > li').livequery(function() {
    $(this).bind('click', function() {
      $('#address_city'). //how do I fire the "enter" event from here?
    }); 
  });

Any thoughts?

+1  A: 

Replace the snippet you provided with the below, and it should work as you want it to:

$(this).bind('keypress click', {
    __c: __c
}, function (e) {

    var c = '';
    var i = 0;

    var v = $(this).val();

    // if enter is pressed, or if element is clicked
    if (e.keyCode == 13 || e.type == 'click') {
        e.stopPropagation();
        e.preventDefault();
        __createSpans(this, v, e.data.__c, true);
    }

});

The only two changes I have made:

  • Bind to the click event in addition to the keypress event.
  • Enter the last condition if enter is pressed or the event type is 'click'.
karim79
There is a minor problem: Autocomplete inserts a div at the bottom at the page when the user types in the input field - .ac_results At first I thought I could just copy the code and have a block for .ac_results/click and input/enter. However the .ac_results is replaced each time the user types in the input field, and therefore loses the event. If I understand this correctly, the mouseclick event needs to be attached to the class with livequery. Any tips on how to do this? http://docs.jquery.com/Plugins/livequery
atmorell