input框 既可以手动输入亦可以进行下拉模糊查找

实用情景：对数据进行筛选的时候，往往会碰到客户要求输入框既可以手动输入进行实时模糊查找也可以进行下拉选择。

1. 基本html：

<div class="organ-item">
     <span class="organ-itemt">相关单位：</span>
     <div class="nice-select" style="float:left;box-shadow:none">
        <input id="company_name" type="text" style="width:100%" class="organ-info cenz input" placeholder="输入相关单位"/>
    <ul>
        <foreach name='company_arr' item='vo'>
          <li title='{$vo["name"]}'>{$vo.name}</li>
        </foreach>
    </ul>
    </div>
</div>

2: js部分

// input 点击事件
$(document).on('click','.nice-select',function(e){
                $(".nice-select").find("ul").hide();// 让ul隐藏（当你一个页面多个这样的输入框时你就会用到） 
                $(".nice-select ul li").show();// 列表展示
                $(this).find('ul').show();// 当前子节点显示
                e.stopPropagation();// 阻止事件冒泡
            })

// input 输入事件
$(document).on('input','.input',function(){
        var keywords = $(this).val();
        var count = 0;
        if (keywords != "") {
           $(".nice-select ul li").each(function(i) {
                 var contentValue = $(this).text();            if(contentValue.toLowerCase().indexOf(keywords.toLowerCase()) < 0) {
           $(this).hide();
           count++;
 } else {
         $(this).show();
        }
        if (count == (i + 1)) {
             $(this).parent().find("ul").hide();
             // $(".nice-select").find("ul").hide();
         } else {
             $(this).parent().find("ul").show();
             // $(".nice-select").find("ul").show();
         }
     });
    } else {
        $(".nice-select ul li").each(function(i) {
            $(this).show();
        });
    }
    });
    // 点击页面的任何一点让input列表隐藏
    $(document).click(function(){
       $(".nice-select").find("ul").hide();
    });

效果如下：

注：jQuery水平较差 还望多多指点！