功能:H5可根据输入的匹配相对应的文字下拉框

<!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>

相关推荐