Autocomplete in jQuery Templates

Question

I have the jQuery template which has a textbox which needs to support autocomplete as below.

$('.approvername').each(function (i, el) {
            el = $(el);
            el.autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: 'https://localhost/<myurl>' + request.term,
                        dataType: "json",
                        type: "GET",
                        contentType: "application/json; charset=utf-8",
                        success: function (data) {
                            response($.map(data, function (value, key) {
                                return {
                                    label: value.full_name,
                                    value: value.user_id
                                };
                            }))
                        },
                        error: function (response) {
                            alert(response.responseText);
                        },
                        failure: function (response) {
                            alert(response.responseText);
                        }
                    });
                },
                focus: function (event, ui) {
                    el.val(ui.item.label);
                    return false;
                },
                select: function (e, ui) {
                    el.val(ui.item.label);
                    return false;
                },
                minLength: 1
            });
        });

The code snippet is invoked after the template is initialized.

$("#approverTemplate").tmpl(approvers).appendTo("#approverContainer");

However autocomplete doesn't work. Any suggestions ? There are no errors thrown.

Note: The autocomplete works fine when hooked up to a textbox outside the jQuery Templates.

<script id="approverTemplate" type="text/x-jquery-tmpl">
    <div class="row">
        <div class="col s6">
            <div class="input-field">
                <input id='${name}' class="approvername validate form-control" type="search" required name='${name}'>
                <input id='${name}id' type="text" style="display:none;">
                <label for='${name}' class="active">
                    ${name}
                </label>

            </div>
        </div>
    </div>
</script>

Answer 1

The issue was due to multiple versions of jQuery referenced in the solution. Strangely autocomplete worked fine without templates and never complained about the multiple versions. I removed the older version of the jQuery and it started working.