其他字段使用相同的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(); 

你可能想通过添加一个参数，它接受对象的函数考虑了很多领域的效率要添加自动完成并只将自动完成添加到该对象。