Question

Hope someone can help me. I’m having a lot of problems getting the JQuery Autocomplete widget to work correctly in Zend Framework. I’ve managed to get the autocomplete to display and popup a list of items when I start typing, but when I select an option from the popup list, the value of the autocomplete does not change to the item I selected, rather it changes to the text I actually entered from the keyboard. I’m sure I’m probably doing something stupid but I can’t seem to figure it out. Any help will be appreciated.

The autocomplete is created in the form as follows

    $partner_name = new ZendX_JQuery_Form_Element_AutoComplete('unit_name', array(
        'label'     => 'Partner Name:',
        'required'  => true,
    ));      
    $partner_name->setRequired(true)
         ->addValidator("NotEmpty", true, 
                 array('messages'=>'The Partner Name field cannot be empty'));
    $partner_name->setJQueryParam('data',  array_values($partner_options));

    $partner_name->setDecorators(array('UiWidgetElement', 'Errors'));
    $this->addElement($partner_name);

with $partner_options a doctrine result-set and the form is then displayed in a viewscript decorator. This works fine and as I said, displays the list when I start entering values. In my view I have some dojo javascript that executes on the change event for the automplete element as follows:

<script type="text/javascript" src="<?= $this->baseUrl('/js/dojo-release-1.7.2/dojo/dojo.js')?>"
          data-dojo-config="async: true, parseOnLoad:true"></script>
  <script>
    require(["dijit/registry", "dijit/Dialog"], function (registry, dom)
    {

        dojo.connect(dojo.byId('unit_name'), "change", function(evt) {
            alert(dojo.byId('unit_name').value);
        });

    });
</script>

As you can see, the script connects the change event to a function that displays an alert box with the automplete elements value. The problem is that the value it displays is always the letters I type in and not the value I select from the list.

BTW, the same thing happens when I use JQuery javascript as well as when I use the JQuery UI widget directly in my view.

Really confused. Any help will be appreciated. Thank you

Answer 1

You should investigate Jquery autocomplete!

$( "#selector" ).bind( "autocompletechange", function(event, ui) {
  ...Then perform all required actions
});