网站首页 > 知识剖析正文

select输入联想内容 selectinsert

nixiaole 2024-11-10 12:34:20 知识剖析 18 ℃

单选框输入内容后，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" style="width: 200px">
<input type="text" id="paymentType" name="paymentType" oninput ="changeValue" onfocus="changeValue">
<div id="item"></div>
</div>
</body>
</html>

上一篇： jquery为表单控件传值并提交表单 jquery提交表单调用serialize方法
下一篇： web前端Jquery学习笔记一 jquery 前端

网站首页 > 知识剖析 正文

select输入联想内容 selectinsert

猜你喜欢

网站首页 > 知识剖析正文