select输入联想内容

IT小将

浏览: 46953 次
性别:
来自: 上海

最近访客更多访客>>

深海的鱼

Blackbaby

我啊来了

superbeyone

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript; css

html JavaScript

单选框输入内容后，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>