输入框输入手机号并匹配历史记录

html：

<ul class="form-list border-list">
                <li>
                    <input class="mobile" type="text" placeholder="请输入11位手机号码">
                    <p class="motion-shop"><i class="icon-hook"></i><span>广州移动</span></p>
                    <ul class="hist-box border-bottom hide">
                        <li class="histNum"><span class="historynum">13748941231</span>
                        <span class="font-red">这是手机号码</span></li>
                        <li class="histNum"><span class="historynum">18848941232</span>
                        <span class="font-red">这是手机号码</span></li>
                        <li class="histNum"><span class="historynum">15048941233</span>
                        <span class="font-red">这是手机号码</span></li>
                    </ul>
                </li>
</ul>

css:

.form-list li {
   position: relative;
   display: -webkit-box;
   -webkit-box-align: center;
   padding: 10px;
   box-sizing: border-box;
}


.form-list input {
    -webkit-box-flex: 1; 
    display: -webkit-box; 
    -webkit-box-orient: vertical; 
    -webkit-box-pack: center;
}
.hist-box {
   position: absolute;
   top: 44px;
   width: 100%;
   left: 0;
   background: #fff;
   padding: 10px;
   box-sizing: border-box;
}
.hist-box .histNum {
   color: #898989;
   font-size: 14px;
}

js:

	//聚焦输入框
        $('.mobile').bind('click',function(event){
            var $_this = $(this);
            
            $(this).siblings('.hist-box').removeClass('hide');

            $_this.on('input propertychange',function(){
                var flag = false;
                var inputLen = $_this.val().length; //输入框输入的文字长度

                $('.hist-box li').each(function(){//判断字符串是否匹配
                    var shortStr = $(this).find('.historynum').html().substring(0,inputLen);
                    if($_this.val().match(shortStr)){
                        flag = true;
                    }
                });
              
                if(flag == true && inputLen < 11){
                    $_this.siblings('.hist-box').removeClass('hide');
                }else {
                    $_this.siblings('.hist-box').addClass('hide');
                }
            });
          
           
            //点击历史号码
            $('.hist-box li').on('click',function(event) {
                var histNum = $(this).find('.historynum').html();
                $_this.val(histNum);
                $(this).parent('.hist-box').addClass('hide');
            }); 
        });

解题思路：此题的重点是实时判断输入框内容的长度，并且遍历历史记录的号码，用substring()方法截取与输入框长度一致的字符串；然后通过match()函数看输入框的内容与截取的字符串是否一致，如果一致则继续显示历史记录框，否则隐藏。


效果如图：当输入框输入的号码与以下历史不一致，则会隐藏历史记录部分框。