功能:H5可根据输入的匹配相对应的文字下拉框
yongquanx 2016-08-29
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
<title>搜索</title>
<linkrel="stylesheet"type="text/css"href="../css/v3.0/css/style-lh.css"/>
<linkrel="stylesheet"type="text/css"href="../css/v3.0/css/public-lh.css"/>
</head>
<style>
body{margin:0;padding:0;position:relative;}
.js_query{font-size:2rem;}
.js_button{}
</style>
</style>
<body>
<div>
<inputtype="text"autocomplete="on"name="demoAutoComplete"list="autoNames"class="js_query"placeholder="请输入那你要搜索的值"/>
<datalistid="autoNames">
<optionvalue="没有你的陪伴真的好孤单">家具</option>
<optionvalue="你是我心爱的姑娘">查佳慧</option>
<optionvalue="一人饮酒醉">mc</option>
<optionvalue="信者得爱">杨千嬅</option>
<optionvalue="信徒">张卫健</option>
<optionvalue="童话">陈奕迅</option>
<optionvalue="你爱我像谁">张卫健</option>
</datalist>
<ahref="#"class="js_buttonjs_query">aaa</a>
</div>
</body>
<scripttype="text/javascript"src="../js/v3.0/js/jquery-1.7.2.min.js"></script>
<script>
$(function(){
varoptione1;
vararray=[{"firstName":"Brett","lastName":"McLaughlin","email":"aaaa"},
{"firstName":"Jason","lastName":"Hunter","email":"bbbb"},
{"firstName":"Elliotte","lastName":"Harold","email":"cccc"}];
$.each(array,function(n,value){//each循环遍历array
if(value!=null||value!=undefined||value!=""){//判断不为空的情况下
optione1+="<optionvalue='"+value.firstName+"'>"+value.lastName+"</option>";
$("#autoNames").html(optione1);
}
returntrue;
})
});
$(".js_button").on("click",function(){
varjs_query=$(".js_query").val();//把值获取出来
console.log(js_query);
});
</script>
</html>
相关推荐
background-color: blue;background-color: yellow;<input type="button" value="变蓝" @click="changeColorT