2 Replies Latest reply: Mar 27, 2012 3:27 PM by user8603588 RSS

    Text item with autocomplete and empty return values in js


      does anyone know why the autocomplete text item does not return a selected value to the value attribute of the DOM object if it is selected with the mouse? If i select an entry by using the keyboard (arrow keys and enter), it works as expected.

      This leads to a problem if a dynamic action depends on the change-event of the autocomplete item! In the first case it seems that the autocomplete-item holds a value, but the onchange-event does not not fire, because the value is empty.

        • 1. Re: Text item with autocomplete and empty return values in js
          Patrick Wolf-Oracle
          Hi Jens,

          the problem seems to be the default behavior of the browser. When you enter some text into the autocomplete and the list is displayed, the focus is still in the text field. Also if you use the keyboard cursors to pick an entry the focus will still be in the textfield. That's why the change event of the textfield doesn't fire. It only fires if you leave the field.

          On the other side if you pick an entry with the mouse, the browser will remove the focus from the text field for a moment (before the JavaScript code puts the focus back), because you clicked outside of the field. But that's enough so that the browser fires the change event.

          I had a look into documentation of the underlaying jQuery Autocomplete widget (http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/) and there is actually an event called "result" which can be captures if an entry is selected from the drop down list.

          In your APEX page you can use the following example:
          apex.jQuery('#P7_DEPT').bind('result', function(){ alert('result: '+$v('P7_DEPT'));});
          To display and alert if the value has changed.

          Note 1: Be aware that this event only fires if the user picks a value. It doesn't fire if he enters a non-existing value and leaves the field.
          Note 2: That event might change in the future if we use a different autocomplete widget which would break your existing code. So use the above tip at your own risk :-)

          My Blog: http://www.inside-oracle-apex.com
          APEX 4.0 Plug-Ins: http://apex.oracle.com/plugins
          Twitter: http://www.twitter.com/patrickwolf
          • 2. Re: Text item with autocomplete and empty return values in js
            Hi Jens,
            I've tried provided solution but still can not bind Text field autocomplete in APEX 4.0.

            apex.jQuery('#P7_CUSTOMER_NO').bind('result', function(){ alert('result: '+$v('P7_CUSTOMER_NO'));});

            Where exactly in the page the apex.jQuery have to be placed. Any additional code needs to be written?