其他字段使用相同的JQuery自動完成腳本

Question

我對創建的功能有問題。基本上我希望用戶將自己的特色添加到他們的個人資料中。我已經創建了一個表單，並通過單擊按鈕添加了附加字段。見的jsfiddle代碼在這裏：

http://jsfiddle.net/wowdesignsolutions/X5Efu/6/

HTML

<form> 
    <input type="text" class="text-long" name="Title[]" id="Title1" rel="autocomp1" /> 
    <input type="hidden" name="SPSCode[]" id="SPSCode1" value="0" rel="autospcode1" /> 
    <br> 
<span class="addafter" onclick="counterA++;counterB++;afterText()">Add another speciality</span> 
</form> 

JAVASCRIPT

var counterA = 0; 
var counterB = 1; 

function afterText() { 
    var txt1 = '<input type="text" class="text-long-add" name="Title[]" id="Title' + counterB + '" rel="autocomp' + counterB + '" /><input type="hidden" name="SPSCode[]" id="SPSCode' + counterB + '" value="0" rel="autospcode' + counterB + '" />'; 
    $("input[id^='SPSCode" + counterA + "']").after(txt1); 
} 

$(function t() { 
    var dentisttypes = [ 
     "Special Care Dentistry", 
     "Oral Surgery", 
     "Paediatric Dentistry", 
     "Orthodontics", 
     "Endodontics", 
     "Periodontics", 
     "Prosthodontics", 
     "Restorative Dentistry", 
     "Dental Public Health", 
     "Oral Medicine", 
     "Oral Microbiology", 
     "Oral and Maxillofacial Pathology", 
     "Dental and Maxillofacial Radiology", 
     "Dental Anesthesiology", 
     "Special Needs Dentistry", 
     "Forensic Odontology", 
     "Geriatric Dentistry"]; 
    $("input[rel^='autocomp']").autocomplete({ 
     type: "POST", 
     source: dentisttypes, 
     minLength: 2, 
     focus: function (e, t) { 
      $("input[rel='autocomp" + counterB + "']").val(t.item.label); 
      $("input[rel='autospcode" + counterB + "']").val(t.item.value); 
      return false; 
     }, 
     select: function (e, t) { 
      $("input[rel='autocomp" + counterB + "']").val(t.item.label); 
      $("input[rel='autospcode" + counterB + "']").val(t.item.value); 
      return false; 
     } 
    }) 
     .data("ui-autocomplete")._renderItem = function (e, t) { 
     return $("<li>").append("<a>" + t.label + "</a>").appendTo(e); 
    }; 
}); 

我有越來越的 「自動完成」，以在新的輸入字段的工作問題創建的。我希望所有新輸入字段和原始輸入字段都使用相同的自動完成功能。實際的自動完成列表是從一個數據庫中產生的，但我已經硬編碼了這個例子。

有關如何在所有新的rel =「autocomp」輸入字段上激活自動完成的任何想法？

這個答案非常接近我想要的（Autocomplete on appended field in JQuery），但我沒有使用列表，我已經有了創建新輸入字段的代碼。如果我在這個答案中使用代碼，我該如何調整（比如觸發點擊事件等）？

乾杯 摹

Answer 1

簡單的解決方案：

var counterA = 0; 
var counterB = 1; 

function afterText() { 
    var txt1 = '<input type="text" class="text-long-add" name="Title[]" id="Title' + counterB + '" rel="autocomp' + counterB + '" /><input type="hidden" name="SPSCode[]" id="SPSCode' + counterB + '" value="0" rel="autospcode' + counterB + '" />'; 
    $("input[id^='SPSCode" + counterA + "']").after(txt1); 
    t(); 
} 

function t() { 
    var dentisttypes = [ 
     "Special Care Dentistry", 
     "Oral Surgery", 
     "Paediatric Dentistry", 
     "Orthodontics", 
     "Endodontics", 
     "Periodontics", 
     "Prosthodontics", 
     "Restorative Dentistry", 
     "Dental Public Health", 
     "Oral Medicine", 
     "Oral Microbiology", 
     "Oral and Maxillofacial Pathology", 
     "Dental and Maxillofacial Radiology", 
     "Dental Anesthesiology", 
     "Special Needs Dentistry", 
     "Forensic Odontology", 
     "Geriatric Dentistry"]; 
    $("input[rel^='autocomp']").autocomplete({ 
     type: "POST", 
     source: dentisttypes, 
     minLength: 2, 
     focus: function (e, t) { 
      var id = $(this).attr("id"); 
      var selectedNum = id.charAt(id.length - 1); 
      var hiddenId = "SPSCode" + selectedNum; 
      $("#" + id).val(t.item.label); 
      $("#" + hiddenId).val(t.item.value); 
      return false; 
     }, 
     select: function (e, t) { 
      var id = $(this).attr("id"); 
      var selectedNum = id.charAt(id.length - 1); 
      var hiddenId = "SPSCode" + selectedNum; 
      $("#" + id).val(t.item.label); 
      $("#" + hiddenId).val(t.item.value); 
      return false; 
     } 
    }) 
     .data("ui-autocomplete")._renderItem = function (e, t) { 
     return $("<li>").append("<a>" + t.label + "</a>").appendTo(e); 
    }; 
} 

t(); 

你可能想通過添加一個參數，它接受對象的函數考慮了很多領域的效率要添加自動完成並只將自動完成添加到該對象。