在動態創建的輸入字段上啓用jQuery自動完成

我已經閱讀了幾乎所有我能找到的關於如何完成這個任務的文章，但是我仍然失敗了。主要是因爲我是jQuery/Javascript的業餘愛好者。在動態創建的輸入字段上啓用jQuery自動完成

我有一個網站，其中包含一個輸入元素。我設法讓jQuery Autocomplete在這方面很好地工作。問題是，當我使用.append方法動態添加其他元素時，這些新元素不適用於自動完成。

見的jsfiddle：http://jsfiddle.net/aktive/r08m8vvy/

see jsfiddle for full code sample

三江源提前爲您的幫助！ :) -Dean

來源

2014-10-22 aktive

感謝大家評論。一些非常好的解決方案。 – aktive 2014-10-22 01:00:15

您必須添加新元素

$(wrapper).find('input[type=text]:last').autocomplete({ 
       source: availableAttributes 
});

見例如後綁定自動完成： http://jsfiddle.net/r08m8vvy/4/

來源

2014-10-22 00:43:51 dfionov

非常感謝！我現在明白:) – aktive 2014-10-22 00:59:18

你好@dfionov，你可以檢查一次http://stackoverflow.com/questions/33410824/autocomplete-in-jquery-with-dynamically-added-elements請。謝謝 – Jaikrat 2015-10-29 11:46:33

如果我們想要在輸入框中輸入數據並提供數據，那麼該怎麼辦？ – Bineesh 2017-03-25 06:56:51

見http://jsfiddle.net/r08m8vvy/2/

爲新輸入自己的ID並調用它自動完成。您所做的初始autocompate調用將不包含動態添加的輸入。

$(wrapper).append('<div><input id="' + x + '" type="text" name="mytext"/><a href="#" class="remove_field">Remove</a></div>'); //add input box 

$("input[id="+ x +"]").autocomplete({ 
    source: availableAttributes 
});

來源

2014-10-22 00:41:02 artm

我更新了小提琴http://jsfiddle.net/r08m8vvy/5/

你必須自動完成綁定新的元素

$(wrapper).append($('<div><input type="text" name="mytext[]"/><a href="#" class="remove_field">Remove</a></div>').find(":text").autocomplete({ 
    source: availableAttributes 
}));

來源

2014-10-22 00:43:01

我實際上發現一個更可靠的方法是使用'on'與'focus'動作綁定，以基於字段類初始化auto自動完成，並在退出時取消它。這樣它就會清理垃圾，只有在需要時纔會清理垃圾。

我用它克隆行，甚至做深層克隆，克隆行的加號和減號按鈕，它不克隆自動完成。

var auto_opts = {...opts...} 

$('body').on('focus', '.search_field', function(){ 
    $(this).autocomplete(auto_opts).on('blur', function(){$(this).autocomplete('destroy')}); 
    });

這也意味着，你是不是被迫使用的最後一排，因爲它可以在現場爲您專注於它

來源

2016-10-21 01:59:10 crazeyez

這是比其他解決方案更容易和更通用的解決方案。 – Droidzone 2018-03-09 16:24:45

在動態創建的輸入字段上啓用jQuery自動完成

回答

相關問題