3

Possible Duplicate:
jQuery AutoComplete Trigger Change Event

I am using jQuery UI v1.9 and I successfully implemented the jQuery UI Autocomplete widget. I would like to know if it is possible to trigger / bind a jQuery UI event and, if so, how to make that. That is, for example, if I have

$('#autocomplete_field" %>').autocomplete({
  change: function (event, ui) {
    // Make something...
  },
  minLength: 2,
  ...
});

is it possible to run the jQuery UI change event by binding that to a keypress event?

Note: I tried

$('#autocomplete_field').bind('keypress', function(event) {
    $('#autocomplete_field').autocomplete('option', 'change').call();
});

but I get the following error (from the Firebug console):

TypeError: elem.nodeName is undefined
...ks = jQuery.valHooks[ elem.type ] || jQuery.valHooks[ elem.nodeName.toLowerCase(...
Community
  • 1
  • 1
Backo
  • 18,291
  • 27
  • 103
  • 170

3 Answers3

0

After a quick review of the jQuery UI source, I was mostly correct in my initial guess (it's been a while since I've used any jQuery UI widgets).

autocomplete and the like use the jQuery.Widget builder, which prefixes any events called with the name of the widget (or widgetEventPrefix if one was provided).

For autocomplete, this means that the events should be triggerable and bindable via autocompletechange, autocompleteclose, etc (you can find the rest of the events on the autocomplete widget's documentation page)

zzzzBov
  • 174,988
  • 54
  • 320
  • 367
0

I think it will be easy if you just abstract the function out of your autocomplete. 

$('#autocomplete_field" %>').autocomplete({
    change: function (event, ui) {
        changeFunction()
    },
    minLength: 2,
          ...
});

$('#autocomplete_field').bind('keypress', function(event) {
    changeFunction();
});

function changeFunction() {
//make something
}
user1827044
  • 176
  • 5
  • How can I pass `event`, `ui` arguments to the `changeFunction()` function from `$('#autocomplete_field').bind('keypress', function(event) { changeFunction(); });`? – Backo Nov 20 '12 at 15:41
  • Edit changefunction so that it takes arguments, so function changeFunction(event, ui) { //make something }. Then call it with changeFunction(event, ui). – user1827044 Nov 20 '12 at 16:10
0

this will cover autocomplete for the textbox:

  $(".autoCompleteTxtBox").autocomplete({
                 source: "www.url.com/Source",
                 select: function (event, ui) {
                     //something to do when user selects from dropdown
                 }
             });



 $(document).on('keyup, keydown, change', '.selectorClass', function(event){    
       //I'm not sure what you need ui for exactly
      var pos = $(this).position(); // gets position of .selectorClass
      var val = $(this).val(); // gets current value of .selectorClass
      var width = $(this).width(); // gets width
     // if there are multiple '.selectorClass' - $(this) is the one that fired event
   });

Does that give you an idea of how $(this) is used ?

a little redundant to handle events in 2 spots for same textbox , but if that's what you want - this will have a functioning autocomplete , and another place for handeling everytime the textbox is change no matter how it was changed.

Scott Selby
  • 9,420
  • 12
  • 57
  • 96
  • I tried your code but it seems do *not* fire the `change` event every time text box is changed (in your example, on `keyup`, `keydown` , ... events). – Backo Nov 20 '12 at 15:49
  • @Backo - edited - that should cover it all for you – Scott Selby Nov 20 '12 at 15:52
  • actually use .on() - edited answer , version 1.9 can handle .on() – Scott Selby Nov 20 '12 at 15:53
  • I have to pass `event` and `ui` arguments to `function()`, as well as for the jQuery UI `change` event makes. Is it possible by using your code? – Backo Nov 20 '12 at 15:57
  • function(event) will definitively work , function(event, ui) should work , you can always use $(this) as well – Scott Selby Nov 20 '12 at 16:00
  • anywhere in the function $(this) can be called and it refers to the element that fired the event – Scott Selby Nov 20 '12 at 16:03
  • I tested `function(event, ui)` this way `$(".autoCompleteTxtBox").on('keyup, keydown, change', function(event, ui){ ... }` and it does *not* work: I get `TypeError: ui is undefined` when I call the `ui` variable inside that function. What is the problem? How should I use `$(this)`? – Backo Nov 20 '12 at 16:06
  • *BTW*: I need the `ui` variable because I would like to *check if an item is or not selected from the jQuery Autocomplete menu* (see also [this](http://stackoverflow.com/questions/13456321/how-to-handle-cases-when-no-item-selection-is-performed-but-a-string-is-present)). – Backo Nov 20 '12 at 16:14
  • you may want to figure a better way to make use of select: function part of the autocomplete , that is fired when a user selects from the dropdown , or maybe you could do .blur() of textbox and see if the val() matches any of the returned values from autocomplete, – Scott Selby Nov 20 '12 at 16:24
  • It is hard to figure out how I can use the `select` event in order to reach the behavior I am looking for... so, a solution I thought of, is to use the `change` method and some callbacks. – Backo Nov 20 '12 at 16:33