联想(查询出所有的,然后输入的去对比是否包含)
效果如图所示
首先遍历出所有的值 放到div中并且隐藏
<div id="all_company_name_list" hidden> <c:forEach var="item" items="${companyNameList}"> <li class="company" company_id="${item.id}" company_name="${item.companyName}" onclick="completeAuto(this);"> ${item.companyName}</li> </c:forEach> </div>
这里是输入框和放一个隐藏的展示ul
<div class="nr4-info nr4-list"> <p>所属企业:</p><input type="text" id="text_input" name="companyName" class="nr4_inp2 ni" value="${companyInfoEntity.companyName}" onkeyup="auto();"/> <div class="show-wrap"> <ul id="show-company-list" hidden> </ul> </div> <input type="hidden" id="companyId" value="${companyInfoEntity.id}"> <i>(请选择已有的企业)</i> </div>
ss
$(function () { $("#form").click(function(){ //$("#companyId").val(""); $("#show-company-list").hide(); }); }); function auto() { $(".show-wrap").show(); //当聚焦输入框,并且输入一个值后就把下拉框显示出来 $("#show-company-list").html('<li class="company" company_id="-1" company_name="" onclick="completeAuto(this);"></li>');//第一行显示一个空值 var str = $.trim($("#text_input").val());//拿到输入框的值
$.each($("#all_company_name_list .company"), function (index, value) {//遍历 if (str == "" || $(value).attr("company_name").indexOf(str) > -1)//由于文本框不是必填项,所以可以为空值 $($(this).clone()).appendTo($("#show-company-list"));//这里最后clone到我们要显示的下拉框中 }); $("#show-company-list").show();//最后显示出来 } function completeAuto(obj) { $("#text_input").val($(obj).attr("company_name"));//点击下拉框里的值,赋值给那个输入文本框 $("#companyId").val($(obj).attr("company_id"));//点击下拉框里的值,赋值给隐藏域中的id $("#show-company-list").hide();//赋值完后,就把下拉框收起来 }
$("#all_company_name_list .company")这个是拿到隐藏的值(div中提早查询出的所有值)
$(value).attr("company_name").indexOf(str) > -1 查找包含str的value并赋值给company_name