1.基于jQuery和layer，实现弹出动态获取的人员名称，选择并添加至输入框，第二次显示输入框中已有的人员名称且不能够再次选择之前已经选择的值。
$(function() { $.fn.extend({ personlayer: function() { $(this).on("focus", function() { var a = this; $("body").after('<div id="addPerson" style="display: none;">' + '<table class="table table-bordered" id="addTable">' + "</table></div>"); $.ajax({ url: "这里是url", type: "post", dataType: "json", success: function(f) { var i = []; for (key in f.data) { i.push(f.data[key].name) } $("#addTable tr").remove(); td = document.querySelectorAll("td"); if (i.length > td.length) { var b = Math.ceil((i.length - td.length) / 5); for (var e = 0; e < b; e++) { $("#addTable").append("<tr><td></td><td></td><td></td><td></td><td></td></tr>") } } else { $("#addTable tr").remove(); for (var e = 0; e < i.length; e++) { $("#addTable").append("<tr><td></td><td></td><td></td><td></td><td></td></tr>") } } $("#addTable td").on("click", function() { $(this).toggleClass("in"); $(".in").css({ "background": "rgba(255, 151, 25, 0.8)" }) }); var g; var k = document.querySelectorAll("td"); var m = a.value, c = m.toString(), j = c.split(";"); var h = []; for (var d = 0; d < j.length; d++) { h.push(j[d]) } setTimeout(function() { for (var n = 0; n < i.length; n++) { k[n].innerText = i[n] } for (var n = 0; n < k.length; n++) { for (var l = 0; l < h.length; l++) { if (h[l] == k[n].innerText) { k[n].style.backgroundColor = "#eee"; k[n].style.pointerEvents = "none"; k[n].classList.remove("in") } } } }, 100) }, error: function() { alert(data.msg) } }); layer.open({ title: "人员名册", type: 1, area: ["400px", "400px"], content: $("#addPerson"), fix: false, btn: ["确定", "取消"], yes: function(b) { ins = document.querySelectorAll(".in"); for (var c = 0; c < ins.length; c++) { a.value += ins[c].innerText + ";" } layer.close(b) }, cancel: function() { return true }, btn2: function(b) { return true } }) }) } }); $(".allowperson").personlayer() });