模仿datalist标签，仿百度写法

来源：互联网发布：mysql 字符函数编辑：程序博客网时间：2024/06/05 03:39

使用datalist时，ie9不支持。而且datalist如果数据从后台获取时，需要从新在点击一下文本框才能显示筛选内容。所以就自己实现了。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title> <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script> <style> * { padding: 0; margin: 0; border: none; } .wrap { position: relative; width: 368px; } .wrap input { width: 300px; height: 20px; border: 1px solid #778899; box-sizing: border-box; } #cities {position: absolute;top: 24px;right: 0;width: 300px;max-height: 400px;overflow: auto;list-style: none;border: 1px solid #778899;border-top: none; display: none;/*display: none;*/ } #cities li:hover{background-color: #87CEFA; } </style></head><body><div class="wrap">选择城市:<input type="text" name="cname" list="cities" id="workUnit" autofocus="true"/><ul id="cities"></ul></div></body></html><script type="text/javascript">//需要添加的数据内容,可以通过ajax请求获取var cities = [{label:"xian",value:"西安"},{label:"hubei",value:"湖北"},{label:"wuhai",value:"武汉"}]; //获取datalist的domvar ss = document.getElementById("cities");//定义加载城市的函数function loadcities(){var innerHtmlStr="";for(var i = 0;i < cities.length; i ++){var city = cities[i];innerHtmlStr+='<li onclick="setValToInput(this)">'+city.value+'</li>';}//jquery实现的方式$("#cities").html(innerHtmlStr);$("#cities").css("display","block")}//对比输入框关键词的变化keywordLength=0;$('#workUnit').keyup(function(e){selectLength = 0;var keyword = $('#workUnit').val().trim();if (keyword == ""){return false;}switch(e.keyCode){case 37:case 38:case 39:case 40:case 13:case 9:return false;}//判断输入了新字符，避免输入汉字时重复提交if(keyword.length==keywordLength){return false;}else{keywordLength=keyword.length;}//模仿从后台ajax请求数据loadcities();});//获取点击的li,并赋值到input中function setValToInput(e){var obj=$(e);if(obj.length>0){var liObj=obj[0].innerHTML;console.log(liObj);$("#workUnit").val(liObj);$("#cities").css("display","none")}}</script>

阅读全文

0 0