ajax加载的文本框上的Jquery UI自动完成答案

【问题标题】：Jquery UI autocomplete on ajax loaded textboxajax加载的文本框上的Jquery UI自动完成
【发布时间】：2016-10-11 11:16:47
【问题描述】：

<div id='toolbox'>
    <div class='placeholder'></div>
</div>

我正在使用点击事件将这个文本框加载到占位符中。

$('#toolbox .placeholder').load('http://scarlett-angel.com/honours-server/admin_editors/word.php');});

这就是正在加载的内容

<div class="honours-container toolbox-widget">
    <label>add word</label><input type="text" name="search_word" id="search_word">
</div>

我之前曾在加载 DOM 时存在的元素上使用 jquery UI 自动完成功能。

$( "#word" ).autocomplete({
source: 'http://46.101.8.220/fake-server/word-search.php',
minLength: 1,
success: function (data) {
            response(data.map(function (value) {
                return {
                    'label': '<li>' + value.Id + '</li>',
                    'value': value.Value
                };  
            }));
        }   
});

我希望能够将选项屏幕的不同部分加载到同一个占位符区域，并且能够在不需要这些部分时将其清除。我可能会在静态 html 中创建所有部分，然后在视图中打开和关闭它们。但我很好奇是否有人知道解决此问题的方法？

【问题讨论】：

标签： javascript jquery ajax jquery-ui autocomplete

【解决方案1】：

您可以将初始化自动完成的代码放入这样的函数中：

function intilalizeAutocomplete(){
$( "#word" ).autocomplete({
source: 'http://46.101.8.220/fake-server/word-search.php',
minLength: 1,
success: function (data) {
            response(data.map(function (value) {
                return {
                    'label': '</li>' + value.Id + '</li>',
                    'value': value.Value
                };  
            }));
        }   
});
}

然后在每次使用 ajax 加载文本框时调用此方法。

$('#toolbox .placeholder').load('http://scarlett-angel.com/honours-server/admin_editors/word.php');});
intilalizeAutocomplete();

您还可以通过传递文本框 id 将您的方法参数化以将其用于任何文本框。

【讨论】：