写个二级搜索框，选择搜索内容

平常的搜索框分为两种，一种是根据搜索框的内容去请求数据，这种试用与数据特别多，搜索不频繁的情况；还有一种，是直接渲染出所有的数据，当你搜索的时候显示出相应的部分。今天我们就来说说第二种

效果图

• 原渲染列表
  
• 搜索
  
• 搜索二级内容
  

html

php渲染下拉框列表

<div class="form-group">
  <label for="">财务标签：</label>
  <div class="intelligent" style="width: calc(100% - 120px);">
    <input type="text" name="finance_tag" class="form-control finance_tag">
    <div class="triangle"></div>
    <ul class="grade-label">
      <?php foreach($label as $v): ?>
      <li class="label-parent">
        <p tagid="<?=$v['data']['id']?>"><?=$v['data']['name']?></p>
        <?php if($v['child']): ?>
        <ul class="label-list"> <!--二级内容-->
          <?php foreach($v['child'] as $child): ?>
          <li class="label-child" tagid="<?=$child['id']?>">
          	<?=$child['name']?>
          </li>
          <?php endforeach; ?>
        </ul>
        <?php endif; ?>
      </li>
      <?php endforeach; ?>
    </ul>
  </div>
</div>

css

.list-form .form-group .form-control.finance-list{
    position: relative;
    overflow: initial;
}
.finance-list::after{
    content: '';
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    border-top: 6px solid #666;
    border-right: 3px solid transparent;
    border-left: 3px solid transparent;
    right: 4px;
    top: 8px;
}
.finance_tag{
    width: 100%;
    height: 24px;
    margin-bottom: 0;
    line-height: 24px;
}
.grade-label{
    display: none;
    position: absolute;
    width: 100%;
    height: auto;
    max-height: 300px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #CBCBCB;
    top: 23px;
    right: 0;
    line-height: 24px;
    user-select: none;
    z-index: 1;
}
.grade-label .label-parent p{
    margin-bottom: 0;
    text-indent: 8px;
    color: #555;
}
.label-child{
    text-indent: 16px;
}
.label-child:hover{
    background: #2f8efa;
    color: #fff;
}

js

$("input[name='finance_tag']").keyup(function (e) {
   e.stopPropagation();
   var _this = this;
   var $li = $(this).siblings('.grade-label').find('.label-parent');
   var li_length = $li.length;
   var temp = $(_this).val();
   var tempZ = new RegExp(temp);
   var isShow = false;
   $li.hide();
   for (var i = 0; i < li_length; i++) {
       var $childUl = $($li[i]).find('.label-list');
       if($childUl.length>0){
           var $childLis = $childUl.find('.label-child');
           $childLis.hide();
           for(var j=0;j<$childLis.length;j++){
               var p_text = $childLis.eq(j).html();
               var istrue = tempZ.test(p_text);
               if (istrue) {
                   $childLis.eq(j).show();
                   $li.eq(i).show();
                   isShow = true;
                   p_text == temp ? 
                   $(_this).attr('tagid',$childLis.eq(j).attr('tagid')) : 
                   $(_this).attr('tagid','');
                   //如果搜索的名字和列表中的内容一直，直接将tagid赋值给input
               }
           }
       }else{
           var p_text = $li.eq(i).find('p').html();
           var istrue = tempZ.test(p_text);
           if (istrue) {
               $li.eq(i).show();
               isShow = true;
               p_text == temp ? $(_this).attr('tagid',$li.eq(i).find('p').attr('tagid')) : $(_this).attr('tagid','');
           }
       }
   }
   isShow ? $(this).siblings('.grade-label').show() : $(this).siblings('.grade-label').hide();
});


var is_show_sel = false;
$('.intelligent').mouseover(function(){
  is_show_sel = true;
}).mouseleave(function(){
  is_show_sel = false;
})
$('body').click(function(){
  if(!is_show_sel){
      $('.intelligent .grade-label').hide();
      if(!$(".intelligent .finance_tag").attr('tagid')){ //如果input没有tagid，就是没有选择列表值，失焦的时候清除内容;清除内容的时候，把列表的一级二级菜单全部显示状态，就最外层是隐藏状态，以防干扰下次的搜索
          $(".intelligent .finance_tag").val('');
          $(".intelligent .label-parent").show();
          $(".intelligent .label-list").show();
          $(".intelligent .label-child").show();
      }
  }
})

$("input[name=finance_tag]").focus(function (e) {
        e.stopPropagation();
        $(".grade-label").hide();
        $(this).siblings(".grade-label").show();
    })
    $(document).on('mouseover', '.label-parent p', function(e){
        if($(this).parent().find('.label-list').length)return;
        $(this).css({'color':'#fff','background': '#2f8efa'})
    })
    $(document).on('mouseleave', '.label-parent p', function(e){
        if($(this).parent().find('.label-list').length)return;
        $(this).css({'color':'#555','background': '#fff'})
    })
    $(document).on('click', '.label-parent p', function(e){
        if($(this).parent().find('.label-list').length)return;
        getFinanceTag($(this))
    })
    $(document).on('click', '.label-child', function(e){
        getFinanceTag($(this))
    })
    function getFinanceTag(ele){
        var tagid = ele.attr('tagid');
        var tagtext = ele.text();
        ele.closest('.intelligent').find('input[name=finance_tag]').val(tagtext).attr('tagid', tagid);
        ele.closest('.intelligent').find('.grade-label').hide();
    }
    $(document).on('click', '.label-child', function(e){
        getFinanceTag($(this))
    })