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

我遇到的问题是获得＆＃34;自动完成功能＆＃34;处理创建的新输入字段。我希望所有新输入字段和原始输入字段使用相同的自动完成。实际的自动完成列表是从数据库生成的，但我已将其硬编码为示例。

关于如何在所有新的rel =＆＃34; autocomp＆＃34;上激活自动完成的任何想法输入字段？

这个答案非常接近我想要的（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();

您可能希望通过向函数添加参数来考虑许多字段的效率，该参数接收要添加自动填充的对象，并仅将自动填充添加到该对象。

其他字段使用相同的JQuery自动完成脚本

1 个答案: