联想(查询出所有的,然后输入的去对比是否包含)

效果如图所示

首先遍历出所有的值 放到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

posted @ 2016-05-04 15:33  夏末、初秋  阅读(195)  评论(0编辑  收藏  举报