select输入联想内容

2018-01-22 10:46:32来源:http://itxiaojiang.iteye.com作者:IT小将人点击

分享
单选框输入内容后,option中显示与之匹配的内容;
只是粗略写了一些,应用到实际场景中,需要做些相应的改变;
具体代码如下:
<html><head><style type="text/css">#paymentType{width: 200px;}#item{display: none;width: 200px;max-height: 200px;overflow-y: scroll;overflow-x: hidden;}#item div{width: 200px;    height: 30px;    background-color: #ddd;    margin: 1px;    text-align: left;    padding-top: 5px;}#item div:hover{background-color: #fff;cursor: pointer;}</style><script type="text/javascript" src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script><script>var list = ["您好十大w", "您好打底","您好防辐射","您好二位","您好热是","您好哈哈哈","您好呵呵呵"]function changeValue(){var targetList = [];var html = "";var value = $("#paymentType").val();for(var i = 0; i < list.length; i++){if(list[i].toLowerCase().indexOf(value.toLowerCase()) >= 0){targetList.push(list[i]);html += "<div onclick='getValue(/"" + list[i] + "/")'>" + list[i] + "</div>";}}document.getElementById('item').innerHTML = html;if(targetList.length > 0){var height = targetList.length * 30;$("#item").height(height + "px")$("#item").show();}else{$("#item").height("0px");}}function getValue(value){$("#paymentType").val(value);$("#item").hide();}function hide(){$("#item").hide();}function show(){$("#item").show();}</script></head><body><div onmouseout="hide()" onmouseover="show()"><input type="text"  oninput ="changeValue()" onfocus="changeValue()"><div ></div></div></body></html>

大小: 7.9 KB 大小: 3.4 KB

微信扫一扫

第七城市微信公众平台