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;
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);