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()函数看输入框的内容与截取的字符串是否一致,如果一致则继续显示历史记录框,否则隐藏。
效果如图:当输入框输入的号码与以下历史不一致,则会隐藏历史记录部分框。