jQuery UI在Ajax加载的文本框上自动完成

Question

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

I am using a click event to load this a text box into the placeholder.

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

and this is what is being loaded into it

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

I have previously had jquery UI autocomplete working on an element that existed when the DOM was loaded.

$( "#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
                };  
            }));
        }   
});

I want to be able to .Load different segments of an options screen into the same placeholder area and be able to clear it out when those parts are not needed. I am probably going to just create all the parts in static html and just toggle them on and off into view. But I was curious if anyone knew a work around for this?

Answer 1

You can put your code of initializing autocomplete into a function like this:

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
                };  
            }));
        }   
});
}

and then call this method every time you load text box using ajax load.

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

You can also make your method parameterized to use it for any textbox by just passing the textbox id.