將jquery自動完成添加到頁面加載後添加的字段

我正在使用jQuery UI Autocomplete調用指向數據庫的鏈接來填充表單下拉列表。這工作正常，但我也有一個函數來添加更多的表單字段到窗體（具有相同的名稱/類），我想將自動完成功能應用於這些。將jquery自動完成添加到頁面加載後添加的字段

這是可能的，以及如何重新調用新的表單域的自動完成功能。

我的javascript代碼低於...

var count = 0; 

$(function(){ 

$('input.books').each(function() { 
var autoCompelteElement = this; 
var formElementName = $(this).attr('name'); 
var hiddenElementID = formElementName + '_autocomplete_hidden'; 
/* change name of orig input */ 
$(this).attr('name', formElementName + '_autocomplete_label'); 
/* create new hidden input with name of orig input */ 
$(this).after("<input type=\"hidden\" name=\"" + formElementName + "\" id=\"" + hiddenElementID + "\" />"); 
$(this).autocomplete({source:'search.php', minLength: 3, 
    select: function(event, ui) { 
     var selectedObj = ui.item; 
     $(autoCompelteElement).val(selectedObj.label); 
     $('#'+hiddenElementID).val(selectedObj.value); 
     return false; 
    } 
}); 
}); 


$('p#add_field').click(function(){ 
     count += 1; 
      $('#books').append(
      '<tr>' 
      + '<td><input type="text" name="BookName_' + count + '" id="BookName" class="books" /> </td>' 
      + '<td><input type="text" name="Length_' + count + '" id="Length_' + count + '" /> </td> ' 
      + '<td><input type="text" name="ISBN_' + count + '" id="ISBN_' + count + '" /> </td> ' 
      + '<td><input type="text" name="Year_' + count + '" id="Year_' + count + '" /> </td>' 
      + '</tr>' 
      + '<strong>Link #' + count + '</strong><br />'); 
     }); 



});

來源

2012-10-02 Michael Carver

呼籲這些新領域的自動完成的方法？

var newRow = '<tr>' 
     + '<td><input type="text" name="BookName_' + count + '" id="BookName" class="books" /> </td>' 
     + '<td><input type="text" name="Length_' + count + '" id="Length_' + count + '" /> </td> ' 
     + '<td><input type="text" name="ISBN_' + count + '" id="ISBN_' + count + '" /> </td> ' 
     + '<td><input type="text" name="Year_' + count + '" id="Year_' + count + '" /> </td>' 
     + '</tr>'; 
     //+ '<strong>Link #' + count + '</strong><br />'; <--this line can not be added to a table like this! 
$('#books tbody').append(newRow); 
newRow.autocomplete(..options..);

您不能將那個強壯的元素行附加到表中。瀏覽器正在修復它，但這是非常糟糕的做法。在元素後追加它，如果這是你想要的。

來源

2012-10-02 17:01:33 epascarello

我實際上並不需要那個強大的元素，它只是爲了測試的目的（我正在按照這個教程：http://www.web-design-talk.co.uk/58/adding-unlimited-form-字段與jQuery的MySQL /） –

而是用繩子構建HTML，你可以使用jQuery來構建它，並在同一時間連接自動完成：

$('p#add_field').click(function(){ 
    count += 1; 
    var tr = $(document.createElement('tr')); 
    $.forEach(['BookName_', 'Length_', 'ISBN_', 'Year_'], function(key){ 
     var td = $(document.createElement('td')); 
     var input = $(document.createElement('input')).attr('type', 'text') 
                 .attr('name', key+count) 
                 .attr('id', key+count) 
                 .autocomplete(// AUTOCOMPLETE HERE); 
     var strong = $(document.createElement('strong')).html('Link #'+count); 
     td.append(input, strong, $(document.createElement('br')); 
     tr.append(td); 
    }); 
    $('#books').append(tr); 
});

你使用使用document.createElement包裹在jQuery的功能，所以你可以用這種方式只需鏈接其餘的jQuery方法來構建這些元素，以及同時附加自動完成，然後只需使用append來構建元素並根據需要附加它們即可。

來源

2012-10-02 17:03:18 tkone

謝謝你的兩個答覆，但如何將自動完成代碼添加到其中任何一個，我所做的一切都停止頁面上的所有JavaScript工作.. 事實上，如果我刪除該行： .autocomplete（// AUTOCOMPLETE HERE）; 並加上; to .attr（'id'，key + count（so .attr（'id'，key + count）;）頁面上的JavaScript仍然不起作用/沒有字段被添加，因爲#addfield鏈接不是單擊，能夠這樣有錯誤或我錯過了什麼 –

我不得不看你的HTML，以找出爲什麼帶有ID「add_field」的段落標記不可點擊 – tkone

將jquery自動完成添加到頁面加載後添加的字段

回答

相關問題