在加载ajax的文本框{J}上自动完成Jquery UI

时间:2016-10-11 11:16:47

标签: javascript jquery ajax jquery-ui autocomplete

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

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

$('#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中创建所有部分,只是将它们打开和关闭进入视图。但是我很好奇是否有人知道这方面的工作?

1 个答案:

答案 0 :(得分:0)

您可以将初始化自动完成的代码放入如下函数中:

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 load加载文本框时调用此方法。

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

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