jQuery 模板中的自动完成答案

【问题标题】：Autocomplete in jQuery TemplatesjQuery 模板中的自动完成
【发布时间】：2018-10-25 20:49:51
【问题描述】：

我有一个 jQuery 模板，它有一个需要支持自动完成的文本框，如下所示。

$('.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
            });
        });

模板初始化后调用代码sn-p。

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

但是自动完成功能不起作用。有什么建议？没有抛出任何错误。

注意：当连接到 jQuery 模板之外的文本框时，自动完成功能可以正常工作。

<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>

【问题讨论】：

您可能对从 jQuery 模板迁移到 JsRender 模板感兴趣（因为不再支持 jQuery 模板）。使用 JsRender，您还可以使用 JsViews 数据绑定 - 并使用集成的 jQuery UI 小部件 - 请参阅 jsviews.com/#samples/tag-controls/jqui/autocomplete

标签： jquery jquery-ui-autocomplete jquery-templates

【解决方案1】：

问题是由于解决方案中引用了多个版本的 jQuery。奇怪的是，自动完成在没有模板的情况下工作得很好，而且从不抱怨多个版本。我删除了旧版本的 jQuery，它开始工作了。

【讨论】：