首页 > 其他 > 详细

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

时间:2016-05-04 15:41:31      阅读:192      评论:0      收藏:0      [点我收藏+]

效果如图所示

技术分享

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

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

原文:http://www.cnblogs.com/xuerong/p/5458611.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!