[SOLVED] trying to duplicate ajax autocomplete customer selection

[JuanTomas]

Turns out, it was a simple matter of order.  The form element has to come before the javascript autocomplete ajax code.  The fixed controller HTML output looks like this:

<div class="input-group col-lg-12">
                <span class="input-group-addon"><i class="icon-user"></i></span>
                <input type="hidden" id="id_customer" name="id_customer" value="0">
                <input type="text" id="customerFilter" class="input-xlarge" name="customerFilter" value="">
                <span class="input-group-addon"><i class="icon-search"></i></span>
</div>
<script type="text/javascript">
            $('#customerFilter')
                .autocomplete(
                    'ajax-tab.php', {
                    minChars: 2,
                    max: 50,
                    width: 500,
                    selectFirst: false,
                    scroll: false,
                    dataType: 'json',
                    formatItem: function(data, i, max, value, term) {
                        return value;
                    },
                    parse: function(data) {
                        var mytab = new Array();
                        for (var i = 0; i < data.length; i++)
                            mytab[mytab.length] = { data: data[i], value: data[i].cname + ' (' + data[i].email + ')' };
                        return mytab;
                    },
                    extraParams: {
                        controller: 'AdminCartRules',
                        token: 'd8c1101c0170792c2fc6b21ffe851ea1',
                        customerFilter: 1
                    }
                }
            )
            .result(function(event, data, formatted) {
                $('#id_customer').val(data.id_customer);
                $('#customerFilter').val(data.cname + ' (' + data.email + ')');
            });
        </script>

Original question follows:

 

Using PS 1.6.1.2.

 

Update: I've tried using the Chrome AJAX debugger with this code.  No AJAX call is ever triggered by typing in the box.  What do I need to change, so customerFilter.autocomplete will execute when I type in two or more chars?

 

I'm working on an Admin module where the employee has to look up/specify a customer.  I want to make an input field like the autocomplete customer lookup field on the Cart Rules "Conditions" tab.  For this input field, the javascript for the AJAX call is in admin/themes/default/template/controllers/cart_rules/form.js  The AJAX handler is in function ajaxProcess() in AdminCartRulesController.php.

 

In my controller, I call:

 

     $this->context->controller->addJqueryPlugin (array ('autocomplete', 'typewatch', 'jscroll')) ;

 

Inspection of the HTML result shows that the corresponding libraries are being loaded.  My controller outputs the following HTML for the autocomplete field.

 

The javascript part is copied from the above-mentioned form.js

The HTML part is from conditions.tpl

The security token is got using Tools::getAdminTokenLite('AdminCartRules')); I've verified that it is the valid token for the AdminCartRules controller.

<script type="text/javascript">
            $('#customerFilter')
                .autocomplete(
                    'ajax-tab.php', {
                    minChars: 2,
                    max: 50,
                    width: 500,
                    selectFirst: false,
                    scroll: false,
                    dataType: 'json',
                    formatItem: function(data, i, max, value, term) {
                        return value;
                    },
                    parse: function(data) {
                        var mytab = new Array();
                        for (var i = 0; i < data.length; i++)
                            mytab[mytab.length] = { data: data[i], value: data[i].cname + ' (' + data[i].email + ')' };
                        return mytab;
                    },
                    extraParams: {
                        controller: 'AdminCartRules',
                        token: 'd8c1101c0170792c2fc6b21ffe851ea1',
                        customerFilter: 1
                    }
                }
            )
            .result(function(event, data, formatted) {
                $('#id_customer').val(data.id_customer);
                $('#customerFilter').val(data.cname + ' (' + data.email + ')');
            });
        </script><div class="input-group col-lg-12">
                <span class="input-group-addon"><i class="icon-user"></i></span>
                <input type="hidden" id="id_customer" name="id_customer" value="0">
                <input type="text" id="customerFilter" class="input-xlarge" name="customerFilter" value="">
                <span class="input-group-addon"><i class="icon-search"></i></span>

The form field appears correctly with its little icons.  However, typing in the field does not trigger the autocomplete function.  Is there some other setting/connection I need to make?

Edited November 16, 2016 by JuanTomas (see edit history)