1：input 加select标签
//1 初始化时候,先将数据存入数组 varTempArr = [];// 存贮option varSelectObj = document.frm.elements["demo"] /* 先将数据存入数组 */ with(SelectObj){ for(i = 0; i < length; i++){ TempArr[i] = [ options[i].text, options[i].value ] } } //2 functionSelectTip(flag) { varTxtObj = document.frm.elements["txt"] varSelectObj = document.getElementById("demo") varArr = [] with(SelectObj) { varSelectHTML = innerHTML.match(/<[^>]*>/)[0] for(i = 0; i < TempArr.length; i++) if(TempArr[i][0].indexOf(TxtObj.value) == 0 || flag)// 若找到以txt的内容开头的，添option。若flag为true,对下拉框初始化 Arr[Arr.length] ="<option value='" + TempArr[i][1] +"'>" + TempArr[i][0] +"</option>" innerHTML = SelectHTML + Arr.join() +"</SELECT>" } } //3 <form name=frm> <ul> <input type="text"name="txt" placeholder="请输入查找" onkeyup="SelectTip(0)" onclick="SelectTip(1)"/> <span id="demo"> <select name="demo"onchange="txt.value=options[selectedIndex].text;"> <option>1111</option> <option>22</option> <option>33</option> </select> </span> </ul> </form>
2：H5 新标签 datalist
<input list="selelctCurrentManu" id="manuName" name="manuShuru" style="text-align: left;margin-left: 20px;" value="" /> <datalist id="selelctCurrentManu" style="margin-left: 20px;" > <c:forEach items="${manufacturers}" var="manu"> <option value="${manu.name}" id="${manu.id}">${manu.name}</option> </c:forEach> </datalist >
js:
$('#manuName').change(function () { var siteNameTotal = document.getElementById("selelctCurrentManu").options.length; for(var i = 0 ; i < siteNameTotal;i++){ var siteItem = document.getElementById("selelctCurrentManu").options[i].value; var selectedSite = $('#manuName').val(); if(selectedSite == siteItem){ break; } } });
