可输可选可自动提示,还可增加一个!
HTML 页面
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>autoadd</title>
<link href="autoadd.css" rel="stylesheet" type="text/css" />
<script src="../js/jquery-1.6.2.js" type="text/javascript"></script>
<script type="text/javascript" src="autoadd.js"></script>
<script type="text/javascript" src="../js/autoClue.js"></script>
</head>
<body>
<div id="auto">
<!-- <div id="autohead">可输可选可自动提示,还有增加一个的功能!</div> -->
<div class="autobody" id="autobody0">
<div id="selectDiv0">
<select id="select0" class="sele">
</select>
</div>
<input type="text" id="txt0" class="txt" />
<ul id="clue0" class="clue">
</ul>
<input id="addone" type="button" value="增加一个" />
</div>
</div>
<div>今天天气不错,挺风和日丽的</div>
</body>
</html>
CSS页面 autoadd.css
*{ padding : 0px; margin : 0px; } #autohead { color : yellow; padding : 5px; } .autobody { position : relative; margin-top : 5px; margin-bottom : 5px; } .txt { position : absolute; top : 0px; left : 0px; width : 280px; } .sele { position : absolute; top : 0px; left : 0px; width : 300px; } .clue li { list-style-type : none; padding: 2px 0px 2px 4px; cursor: default; } ul.clue { position: absolute; left: 0px; top: 18px; z-index: 10; width: 282px; border: 1px solid #AAA; background-color: #FFF; } #addone { position: relative; left: 300px; top : 0px; } .removeone { position: relative; left: 300px; top : 0px; }
JavaScript代码 autoadd.js
$(document).ready(function(){ var content = ["aaa", "aaab", "aaaccc", "dda", "dddd", "dddee", "dae"]; var maxIndex = 0; var txt0 = document.getElementById("txt0"); var clue0 = document.getElementById("clue0"); var selectDiv0 = document.getElementById("selectDiv0"); var strselect0 = '<div id="selectDiv0"><select id="select0" class="sele">', i, len = content.length; var addone = document.getElementById("addone"); var auto = document.getElementById("auto"); for(i = 0; i < len && i < 20; i++){ strselect0 += '<option>' + content[i] + '</option>'; } strselect0 += '</select></div>'; selectDiv0.innerHTML = strselect0; var select0 = document.getElementById("select0"); select0.onchange = function(){ var num = this.selectedIndex; var seltxt = this.options[num].text; txt0.value = seltxt; }; autoClue.clue(content, txt0, clue0, "请输入***"); addone.onclick = function(){ var newindex = maxIndex + 1; var selectOptStr = '<select id="select' + newindex + '" class="sele">', i; for(i = 0; i < content.length; i++){ selectOptStr += '<option>' + content[i] + '</option>'; } selectOptStr += '</select>'; var domStr = '<div class="autobody" id="autobody' + newindex +'"><div id="selectDiv' + newindex +'"></div><input type="text" id="txt' + newindex +'" class="txt" /><ul id="clue' + newindex +'" class="clue"></ul><input id="removeone' + newindex +'" type="button" class="removeone" value="删除" /></div>'; $(auto).append(domStr); maxIndex++; var selectDiv = $("#selectDiv" + newindex).get(0); var txt = $("#txt" + newindex).get(0); var clue = $("#clue" + newindex).get(0); var removeone = $("#removeone" + newindex).get(0); selectDiv.innerHTML = selectOptStr; var select = $("#select" + newindex).get(0); select.onchange = function(){ var num = this.selectedIndex; var seltxt = this.options[num].text; txt.value = seltxt; }; autoClue.clue(content, txt, clue, "请输入***"); removeone.onclick = function(){ $(this).parent().remove(); }; }; });
JavaScript代码 autoClue.js
(function(window){ var autoClue = { /* * content 为提示内容数组,数组每项均为字符串 * txt 文本框dom对象 * clue ul无序列表dom对象 * txtInitValue 文本框初始化文本 */ clue : function(content, txt, clue, txtInitValue){ var isInit = false; clue.style.display = "none"; var cluestr = clue.id; var createList = function(data){ var i, str='', len = data.length; for(i = 0; i < len && i < 10; i++){ str += '<li id="list' + cluestr + i +'">' + decodeURIComponent(data.pop()); +'</li>'; } return str; }; if(!isInit){ txt.value = txtInitValue; } txt.onfocus = function(){ if(!isInit){ txt.value = ""; } }; txt.onkeyup = function(event){ event = event || window.event; var input = encodeURIComponent(txt.value); var result = new Array(); var i, len = input.length, resultLen; if(input == null || input == ''){ isInit = true; return false; } if(event.keyCode == 40 && clue.innerHTML){ var listLen = clue.children.length, i, curIndex = -1; for(i = 0; i < listLen; i++){ var tmp = clue.childNodes[i].style.backgroundColor; if(tmp != "" && tmp != null && tmp != "none"){ curIndex = i; var curList = document.getElementById("list" + cluestr + i); if(navigator.appName =="Microsoft Internet Explorer"){ curList.style.backgroundColor = ""; }else{ curList.style.backgroundColor = null; } if(i == listLen-1){ curIndex = -1; } break; }; } var nextList = document.getElementById("list" + cluestr + (curIndex + 1)); nextList.style.backgroundColor = "#D1E5FC"; txt.value = nextList.innerHTML; txt.focus(); return false; } if(event.keyCode == 38 && clue.innerHTML){ var listLen = clue.children.length, i, curIndex = 0; for(i = 0; i < listLen; i++){ var tmp = clue.childNodes[i].style.backgroundColor; if(tmp != "" && tmp != null && tmp != "none"){ curIndex = i; var curList = document.getElementById("list" + cluestr + i); if(navigator.appName =="Microsoft Internet Explorer"){ curList.style.backgroundColor = ""; }else{ curList.style.backgroundColor = null; } if(i == listLen-1){ curIndex = -1; } break; }; } var preList = document.getElementById("list" + cluestr + ((curIndex - 1 + listLen) % listLen)); preList.style.backgroundColor = "#D1E5FC"; txt.value = preList.innerHTML; txt.focus(); return false; } if(event.keyCode == 13 && clue.innerHTML){ var listLen = clue.children.length, i, curIndex = -1; for(i = 0; i < listLen; i++){ var tmp = clue.childNodes[i].style.backgroundColor; if(tmp != "" && tmp != null && tmp != "none"){ curIndex = i; var curList = document.getElementById("list" + cluestr + i); txt.value = curList.innerHTML; clue.innerHTML = ""; clue.style.display = "none"; break; }; } return false; } for(i = 0; i < content.length; i++){ if(input == content[i].substring(0, len)){ result.push(content[i]); } } resultLen = result.length; resultStr = createList(result); clue.innerHTML = resultStr; clue.style.display = "block"; for(i = 0; i < resultLen; i++){ var list = document.getElementById("list" + cluestr + i); list.onclick = function(){ txt.value = this.innerHTML; clue.style.display = "none"; }; } }; txt.parentNode.onblur = function(){ alert("blur"); clue.style.display = "none"; }; } }; window.autoClue = autoClue; })(window);