前端输入框键盘键入字符，提示选择功能（例如百度搜索提示）

注意：jquery.min.js请自行添加（没有可以百度下载）--><script src="../jquery.min.js"></script>

效果图：

<!DOCTYPE html>
<html>
<head>
<title>HTML5-Video</title>
<meta charset="utf-8">
</head>
<body>

<div class="nav_Element_Item ">
<h2>仿百度输入框，提示选择功能:</h2>
<div class="data_search_div">
<input class="data_search_input" type="text" placeholder="请输入数据"></div>
<ul class="nav_Element_List">
<li>新闻头条</li>
<li>新闻娱乐头条</li>
<li>全网大数据</li>
<li>编程语言，只能深度学习</li>
<li>编程，遍出世界</li>
<li>大世界</li></ul>
</div>

$(document).on({
"keyup":function(e){
var searchKey = $.trim($(this).val());
if(searchKey=="")return $(".nav_Element_List li").show();
if(searchKey){
var searchReg = new RegExp(searchKey,'gi');
$('.nav_Element_List li').show().filter(function(){
return $(this).text().match(searchReg) == null;
//非只有text时，可加class名进行筛选如：$(this).find('.order_content').text().match(searchReg) == null;
}).hide();
} else{
$('.nav_Element_List li').show();
}
}
},".data_search_input");

   $('.nav_Element_List li').click(function(){

       $('.data_search_input').val($(this).text());

   });

</script>

</body>
</html>

jq代码可直接运行，复制即可

欢迎交流，欢迎提供更高效的代码

前端输入框键盘键入字符，提示选择功能（例如百度搜索提示）

相关推荐