解决方案 »
- 自己做的俄罗斯方块(js + canvas)
- validate 的remote方法
- 我下载了一个jquery-1.5.min.js怎么用啊
- 新手提问:javascript在html中到底是什么?
- 关于使用AlphaImageLoader装载png透明图的问题--急.
- asp 传给 jscript的问题
- 在线急球(如何把text框里的全角空格替换成半角空格)
- 谁有javascript help(中文) mailto:[email protected]
- iframe下有个frameset,frameset中的frame如何引用iframe中的js脚本,如jquery,easyui?
- 请问这个网站的历史比赛链接是怎么的,我获取不到
- 问一个jquery写的相册问题
- 提取HTML代码中的图片URL地址,<img标签内属性排列不规则情况,正则怎么写
oLi.appendChild(document.createTextNode(the_colors[i].en + " " + the_colors[i].cn));
var aColors = {"color":[{"en":"red","cn":"红色"},{"en":"green","cn":"绿色"}]};
alert(aColors.color[0].en);//red
alert(aColors.color[0].cn);//红色
如文本框内输入r 要求reeed排第一,reed排第二,其余匹配的数组按原来的排列顺序。
2.在所有提示内容的后面增加不同的内容,
如提示:
red 红色
blue 青色
且新增的内容在点击或选中后不赋值添加到文本框内。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>自动提示的文本框</title>
<style>
<!--
body{
font-family:Arial, Helvetica, sans-serif;
font-size:12px; padding:0px; margin:5px;
}
form{padding:0px; margin:0px;}
input{
/* 用户输入框的样式 */
font-family:Arial, Helvetica, sans-serif;
font-size:12px; border:1px solid #000000;
width:200px; padding:1px; margin:0px;
}
#popup{
/* 提示框div块的样式 */
position:absolute; width:202px;
color:#004a7e; font-size:12px;
font-family:Arial, Helvetica, sans-serif;
left:41px; top:25px;
}
#popup.show{
/* 显示提示框的边框 */
border:1px solid #004a7e;
}
#popup.hide{
/* 隐藏提示框的边框 */
border:none;
}
/* 提示框的样式风格 */
ul{
list-style:none;
margin:0px; padding:0px;
}
li.mouseOver{
background-color:#004a7e;
color:#FFFFFF;
}
li.mouseOut{
background-color:#FFFFFF;
color:#004a7e;
}
-->
</style>
<script language="javascript">
var oInputField; //考虑到很多函数中都要使用
var oPopDiv; //因此采用全局变量的形式
var oColorsUl;
var aColors = ["red","reed","reeed","red","green","blue","magenta","yellow","chocolate","black","aquamarine","lime","fuchsia","brass","azure","brown","bronze","deeppink","aliceblue","gray","copper","coral","feldspar","orange","orchid","pink","plum","quartz","purple","antiquewith","blanchedalmond","blueviolet","beige","burlywood","bisque","cadetblue","saddlebrown","royalblue","rosybrown","orengered","olivedrab","powderblue","peachpuff","papayawhip","paleturquoise","palevioletred","palegreen","navyblue","navajowhite","palegodenrod","violetred","yellowgreen","tomato","turquoise","thistle","springgreen","steelblue","salmon","scarlet","silver","violet","snow","tan","chartreuse","khaki","mediumslateblue","mediumvioletred","oldlace","maroom","goldenrod","wheat","whitesmoke","moccasin","mistyrose","mintcream","midnightblue","dimgray","darksalmon","slategray","skyblue","sienna","seashell","seagreen","sandybrown","gold","mediumturquoise","navy","mediumspringgreen","mediumseagreen","mediumpurpul","peru","mediumorchid","mediumblue","mediumaquamarine","maroon","limegreen","lightyellow","lightsteelblue","magenta","lightslateblue","lightslategray","lightskyblue","inen","lightseagreen","lightsalmon","lightpink","lightgray","lightgreen","lightgodenrodyellow","indianred","lavender","lightblue","lavenderblush","lightcoral","lightcyan","lightgodenrod","hotpink","greenyellow","lemonchiffon","lawngreen","deepskyblue","honeydew","golenrod","forestgreen","gostwhite","gainsboro","firebrick","dodgerblue","darkturquoise","darkslateblue","darkslategray","darkseagreen","darkred","darkorchid","darkorenge","darkviolet","floralwhite","cyan","darkgray","cornsilk","darkolivegreen","darkgoldenrod","darkblue","darkcyan","darkgreen","darkhaki","ivory","darkmagenta","cornfloewrblue"];
aColors.sort(); //按字母排序,使显示结果更友好
function initVars(){
//初始化变量
oInputField = document.forms["myForm1"].colors;
oPopDiv = document.getElementById("popup");
oColorsUl = document.getElementById("colors_ul");
}
function clearColors(){
//清除提示内容
for(var i=oColorsUl.childNodes.length-1;i>=0;i--)
oColorsUl.removeChild(oColorsUl.childNodes[i]);
oPopDiv.className = "hide";
}
function setColors(the_colors){
//显示提示框,传入的参数即为匹配出来的结果组成的数组
clearColors(); //每输入一个字母就先清除原先的提示,再继续
oPopDiv.className = "show";
var oLi;
for(var i=0;i<the_colors.length;i++){
//将匹配的提示结果逐一显示给用户
oLi = document.createElement("li");
oColorsUl.appendChild(oLi);
oLi.appendChild(document.createTextNode(the_colors[i])); oLi.onmouseover = function(){
this.className = "mouseOver"; //鼠标经过时高亮
}
oLi.onmouseout = function(){
this.className = "mouseOut"; //离开时恢复原样
}
oLi.onclick = function(){
//用户点击某个匹配项时,设置输入框为该项的值
oInputField.value = this.firstChild.nodeValue;
clearColors(); //同时清除提示框
}
}
}
function findColors(){
initVars(); //初始化变量
if(oInputField.value.length > 0){
var aResult = new Array(); //用于存放匹配结果
for(var i=0;i<aColors.length;i++) //从颜色表中找匹配的颜色
//必须是从单词的开始处匹配
if(aColors[i].indexOf(oInputField.value) == 0)
aResult.push(aColors[i]); //压入结果
if(aResult.length>0) //如果有匹配的颜色则显示出来
setColors(aResult);
else //否则清除,用户多输入一个字母
clearColors(); //就有可能从有匹配到无,到无的时候需要清除
}
else
clearColors(); //无输入时清除提示框(例如用户按del键)
}
</script>
</head>
<body>
<form method="post" name="myForm1">
Color: <input type="text" name="colors" id="colors" onkeyup="findColors();" />
</form>
<div id="popup">
<ul id="colors_ul"></ul>
</div>
</body>
</html>
为啥reeed排第一,reed第二?根据什么规则来的?
<html>
<head>
<title>自动提示的文本框</title>
<style>
<!--
body{
font-family:Arial, Helvetica, sans-serif;
font-size:12px; padding:0px; margin:5px;
}
form{padding:0px; margin:0px;}
input{
/* 用户输入框的样式 */
font-family:Arial, Helvetica, sans-serif;
font-size:12px; border:1px solid #000000;
width:200px; padding:1px; margin:0px;
}
#popup{
/* 提示框div块的样式 */
position:absolute; width:202px;
color:#004a7e; font-size:12px;
font-family:Arial, Helvetica, sans-serif;
left:41px; top:25px;
}
#popup.show{
/* 显示提示框的边框 */
border:1px solid #004a7e;
}
#popup.hide{
/* 隐藏提示框的边框 */
border:none;
}
/* 提示框的样式风格 */
ul{
list-style:none;
margin:0px; padding:0px;
}
li.mouseOver{
background-color:#004a7e;
color:#FFFFFF;
}
li.mouseOut{
background-color:#FFFFFF;
color:#004a7e;
}
-->
</style>
<script language="javascript">
var oInputField; //考虑到很多函数中都要使用
var oPopDiv; //因此采用全局变量的形式
var oColorsUl;
var aColors = [{c:"red",n1:"红色1",n2:"红色2",n3:"红色3",n4:"红色4",n5:"红色5"},{c:"green",n1:"绿色1",n2:"绿色2",n3:"绿色3",n4:"绿色4",n5:"绿色5"},{c:"blue",n1:"蓝色1",n2:"蓝色2",n3:"蓝色3",n4:"蓝色4",n5:"蓝色5"},{c:"magenta",n1:"洋红色1",n2:"洋红色2",n3:"洋红色3",n4:"洋红色4",n5:"洋红色5"},{c:"yellow",n1:"黄色1",n2:"黄色2",n3:"黄色3",n4:"黄色4",n5:"黄色5"}];aColors.sort(function(a,b){if(a.c>b.c){return 1;}else{if (a.c<b.c) {return -1;
}else {
return 0;
}}}); //按字母排序,使显示结果更友好
function initVars(){
//初始化变量
oInputField = document.forms["myForm1"].colors;
oPopDiv = document.getElementById("popup");
oColorsUl = document.getElementById("colors_ul");
}
function clearColors(){
//清除提示内容
for(var i=oColorsUl.childNodes.length-1;i>=0;i--)
oColorsUl.removeChild(oColorsUl.childNodes[i]);
oPopDiv.className = "hide";
}
function setColors(the_colors){
//显示提示框,传入的参数即为匹配出来的结果组成的数组
clearColors(); //每输入一个字母就先清除原先的提示,再继续
oPopDiv.className = "show";
var oLi,temp;
for(var i=0;i<the_colors.length;i++){
//将匹配的提示结果逐一显示给用户
oLi = document.createElement("li");
oColorsUl.appendChild(oLi);
oLi.appendChild(document.createTextNode(the_colors[i].c+" " +the_colors[i].n1+" " +the_colors[i].n2+" " +the_colors[i].n3+" " +the_colors[i].n4+" " +the_colors[i].n5)); oLi.onmouseover = function(){
this.className = "mouseOver"; //鼠标经过时高亮
}
oLi.onmouseout = function(){
this.className = "mouseOut"; //离开时恢复原样
}
temp = the_colors[i].c
oLi.onclick = function(){
//用户点击某个匹配项时,设置输入框为该项的值
oInputField.value = temp;
clearColors(); //同时清除提示框
}
}
}
function findColors(){
initVars(); //初始化变量
if(oInputField.value.length > 0){
var aResult = new Array(); //用于存放匹配结果
for(var i=0;i<aColors.length;i++) //从颜色表中找匹配的颜色
//必须是从单词的开始处匹配
if(aColors[i].c.indexOf(oInputField.value) == 0)
aResult.push(aColors[i]); //压入结果
if(aResult.length>0) //如果有匹配的颜色则显示出来
setColors(aResult);
else //否则清除,用户多输入一个字母
clearColors(); //就有可能从有匹配到无,到无的时候需要清除
}
else
clearColors(); //无输入时清除提示框(例如用户按del键)
}
</script>
</head>
<body>
<form method="post" name="myForm1">
Color: <input type="text" name="colors" id="colors" onkeyup="findColors();" />
</form>
<div id="popup">
<ul id="colors_ul"></ul>
</div>
</body>
</html>
在原有的字母排序前提下,特定一些数组项排在前面,剩余匹配的数组项按原来的字母排序。
如打个 r reeed排第一,reed排第二.其余的rted","rded","raeed","raed"按字母顺序排在后面.......................................................
其他一个数组并进行排序
然后第一个数组conat第二个数组
然后显示
<html>
<head>
<title>自动提示的文本框</title>
<style>
<!--
body{
font-family:Arial, Helvetica, sans-serif;
font-size:12px; padding:0px; margin:5px;
}
form{padding:0px; margin:0px;}
input{
/* 用户输入框的样式 */
font-family:Arial, Helvetica, sans-serif;
font-size:12px; border:1px solid #000000;
width:200px; padding:1px; margin:0px;
}
#popup{
/* 提示框div块的样式 */
position:absolute; width:202px;
color:#004a7e; font-size:12px;
font-family:Arial, Helvetica, sans-serif;
left:41px; top:25px;
}
#popup.show{
/* 显示提示框的边框 */
border:1px solid #004a7e;
}
#popup.hide{
/* 隐藏提示框的边框 */
border:none;
}
/* 提示框的样式风格 */
ul{
list-style:none;
margin:0px; padding:0px;
}
li.mouseOver{
background-color:#004a7e;
color:#FFFFFF;
}
li.mouseOut{
background-color:#FFFFFF;
color:#004a7e;
}
-->
</style>
<script language="javascript">
var oInputField; //考虑到很多函数中都要使用
var oPopDiv; //因此采用全局变量的形式
var oColorsUl;
var aColors = [{c:"red",n1:"红色1",yx:1},{c:"redd",n1:"红色2",yx:1},{c:"reeed",n1:"红色3",yx:0},{c:"ratd",n1:"红色4",yx:0},{c:"green",n1:"绿色1",yx:1},{c:"blue",n1:"蓝色1",yx:1},{c:"magenta",n1:"洋红色1",yx:1},{c:"yellow",n1:"黄色1",yx:1}];aColors.sort(function(a, b) {
if (a.yx == 1) {
return -1;
} else {
if (b.yx == 1) {
return 1;
} else {
if (a.c > b.c) {
return 1;
} else {
if (a.c < b.c) {
return - 1;
} else {
return 0;
}
}
}
}
});
//按字母排序,使显示结果更友好
function initVars(){
//初始化变量
oInputField = document.forms["myForm1"].colors;
oPopDiv = document.getElementById("popup");
oColorsUl = document.getElementById("colors_ul");
}
function clearColors(){
//清除提示内容
for(var i=oColorsUl.childNodes.length-1;i>=0;i--)
oColorsUl.removeChild(oColorsUl.childNodes[i]);
oPopDiv.className = "hide";
}
function setColors(the_colors){
//显示提示框,传入的参数即为匹配出来的结果组成的数组
clearColors(); //每输入一个字母就先清除原先的提示,再继续
oPopDiv.className = "show";
var oLi,temp;
for(var i=0;i<the_colors.length;i++){
//将匹配的提示结果逐一显示给用户
oLi = document.createElement("li");
oColorsUl.appendChild(oLi);
oLi.appendChild(document.createTextNode(the_colors[i].c+" " +the_colors[i].n1)); oLi.onmouseover = function(){
this.className = "mouseOver"; //鼠标经过时高亮
}
oLi.onmouseout = function(){
this.className = "mouseOut"; //离开时恢复原样
}
temp = the_colors[i].c
oLi.onclick = function(){
//用户点击某个匹配项时,设置输入框为该项的值
oInputField.value = temp;
clearColors(); //同时清除提示框
}
}
}
function findColors(){
initVars(); //初始化变量
if(oInputField.value.length > 0){
var aResult = new Array(); //用于存放匹配结果
for(var i=0;i<aColors.length;i++) //从颜色表中找匹配的颜色
//必须是从单词的开始处匹配
if(aColors[i].c.indexOf(oInputField.value) == 0)
aResult.push(aColors[i]); //压入结果
if(aResult.length>0) //如果有匹配的颜色则显示出来
setColors(aResult);
else //否则清除,用户多输入一个字母
clearColors(); //就有可能从有匹配到无,到无的时候需要清除
}
else
clearColors(); //无输入时清除提示框(例如用户按del键)
}
</script>
</head>
<body>
<form method="post" name="myForm1">
Color: <input type="text" name="colors" id="colors" onkeyup="findColors();" />
</form>
<div id="popup">
<ul id="colors_ul"></ul>
</div>
</body>
</html>
在帮改下。
var aColors = [{c:"red",n1:"红色1",yx:0},{c:"redd",n1:"红色2",yx:2},{c:"reeed",n1:"红色3",yx:1},{c:"rztd",n1:"红色4",yx:1},{c:"green",n1:"绿色1",yx:1},{c:"blue",n1:"蓝色1",yx:1},{c:"magenta",n1:"洋红色1",yx:1},{c:"yellow",n1:"黄色1",yx:1}];aColors.sort(function(a, b, c) {
if (a.yx == 1) {
return -1;
} else {
if (b.yx == 1) {
return 1;
if (b.yx == 1) {
return 2;
} else {
if (a.c > b.c > c.c) {
return 1;
} else {
if (a.c < b.c < c.c) {
return - 1;
} else {
return 0;
}
}
}
}
});
比如我输个r,显示出其中一个reeed。
点击后输出到文本框内为¥reeed。
http://zhaoxunzhiyin.blog.163.com/blog/static/28877742009916114211534/
c:"redd",n1:"红色2",yx:2
我想它排第一个不行吗?
其他的yx:1 yx:0 排后面不行嘛?
可否帮我弄了a>b>c>d>e....的循环判断呢?
<html>
<head>
<title>自动提示的文本框</title>
<style>
<!--
body{
font-family:Arial, Helvetica, sans-serif;
font-size:12px; padding:0px; margin:5px;
}
form{padding:0px; margin:0px;}
input{
/* 用户输入框的样式 */
font-family:Arial, Helvetica, sans-serif;
font-size:12px; border:1px solid #000000;
width:200px; padding:1px; margin:0px;
}
#popup{
/* 提示框div块的样式 */
position:absolute; width:202px;
color:#004a7e; font-size:12px;
font-family:Arial, Helvetica, sans-serif;
left:41px; top:25px;
}
#popup.show{
/* 显示提示框的边框 */
border:1px solid #004a7e;
}
#popup.hide{
/* 隐藏提示框的边框 */
border:none;
}
/* 提示框的样式风格 */
ul{
list-style:none;
margin:0px; padding:0px;
}
li.mouseOver{
background-color:#004a7e;
color:#FFFFFF;
}
li.mouseOut{
background-color:#FFFFFF;
color:#004a7e;
}
-->
</style>
<script language="javascript">
var oInputField; //考虑到很多函数中都要使用
var oPopDiv; //因此采用全局变量的形式
var oColorsUl;
var aColors = [{c:"red",n1:"红色1",yx:1},{c:"redd",n1:"红色2",yx:2},{c:"reeed",n1:"红色3",yx:0},{c:"ratd",n1:"红色4",yx:0},{c:"reen",n1:"绿色1",yx:1},{c:"rblue",n1:"蓝色1",yx:0},{c:"magenta",n1:"洋红色1",yx:1},{c:"yellow",n1:"黄色1",yx:1}];aColors.sort(function(a, b) {
if (a.yx != b.yx) {
return b.yx-a.yx;
} else {
if (a.c > b.c) {
return 1;
} else {
if (a.c < b.c) {
return - 1;
} else {
return 0;
}
}
}
});
//按字母排序,使显示结果更友好
function initVars(){
//初始化变量
oInputField = document.forms["myForm1"].colors;
oPopDiv = document.getElementById("popup");
oColorsUl = document.getElementById("colors_ul");
}
function clearColors(){
//清除提示内容
for(var i=oColorsUl.childNodes.length-1;i>=0;i--)
oColorsUl.removeChild(oColorsUl.childNodes[i]);
oPopDiv.className = "hide";
}
function setColors(the_colors){
//显示提示框,传入的参数即为匹配出来的结果组成的数组
clearColors(); //每输入一个字母就先清除原先的提示,再继续
oPopDiv.className = "show";
var oLi,temp;
for(var i=0;i<the_colors.length;i++){
//将匹配的提示结果逐一显示给用户
oLi = document.createElement("li");
oColorsUl.appendChild(oLi);
oLi.appendChild(document.createTextNode(the_colors[i].c+" " +the_colors[i].n1)); oLi.onmouseover = function(){
this.className = "mouseOver"; //鼠标经过时高亮
}
oLi.onmouseout = function(){
this.className = "mouseOut"; //离开时恢复原样
}
temp = the_colors[i].c
oLi.onclick = function(){
//用户点击某个匹配项时,设置输入框为该项的值
oInputField.value = temp;
clearColors(); //同时清除提示框
}
}
}
function findColors(){
initVars(); //初始化变量
if(oInputField.value.length > 0){
var aResult = new Array(); //用于存放匹配结果
for(var i=0;i<aColors.length;i++) //从颜色表中找匹配的颜色
//必须是从单词的开始处匹配
if(aColors[i].c.indexOf(oInputField.value) == 0)
aResult.push(aColors[i]); //压入结果
if(aResult.length>0) //如果有匹配的颜色则显示出来
setColors(aResult);
else //否则清除,用户多输入一个字母
clearColors(); //就有可能从有匹配到无,到无的时候需要清除
}
else
clearColors(); //无输入时清除提示框(例如用户按del键)
}
</script>
</head>
<body>
<form method="post" name="myForm1">
Color: <input type="text" name="colors" id="colors" onkeyup="findColors();" />
</form>
<div id="popup">
<ul id="colors_ul"></ul>
</div>
</body>
</html>
在帮搞个......
能在每个提交到文本框的数组项前面加个字符不?
比如加个¥。
但是在文本提示框中不显示出¥。
只有点击后提交到文本框内才显示出来。
比如点red后在文本框内变成¥red
<html>
<head>
<title>自动提示的文本框</title>
<style>
<!--
body{
font-family:Arial, Helvetica, sans-serif;
font-size:12px; padding:0px; margin:5px;
}
form{padding:0px; margin:0px;}
input{
/* 用户输入框的样式 */
font-family:Arial, Helvetica, sans-serif;
font-size:12px; border:1px solid #000000;
width:200px; padding:1px; margin:0px;
}
#popup{
/* 提示框div块的样式 */
position:absolute; width:202px;
color:#004a7e; font-size:12px;
font-family:Arial, Helvetica, sans-serif;
left:41px; top:25px;
}
#popup.show{
/* 显示提示框的边框 */
border:1px solid #004a7e;
}
#popup.hide{
/* 隐藏提示框的边框 */
border:none;
}
/* 提示框的样式风格 */
ul{
list-style:none;
margin:0px; padding:0px;
}
li.mouseOver{
background-color:#004a7e;
color:#FFFFFF;
}
li.mouseOut{
background-color:#FFFFFF;
color:#004a7e;
}
-->
</style>
<script language="javascript">
var oInputField; //考虑到很多函数中都要使用
var oPopDiv; //因此采用全局变量的形式
var oColorsUl;
var aColors = [{c:"red",n1:"红色1",yx:1},{c:"redd",n1:"红色2",yx:2},{c:"reeed",n1:"红色3",yx:0},{c:"ratd",n1:"红色4",yx:0},{c:"reen",n1:"绿色1",yx:1},{c:"rblue",n1:"蓝色1",yx:0},{c:"magenta",n1:"洋红色1",yx:1},{c:"yellow",n1:"黄色1",yx:1}];aColors.sort(function(a, b) {
if (a.yx != b.yx) {
return b.yx-a.yx;
} else {
if (a.c > b.c) {
return 1;
} else {
if (a.c < b.c) {
return - 1;
} else {
return 0;
}
}
}
});
//按字母排序,使显示结果更友好
function initVars(){
//初始化变量
oInputField = document.forms["myForm1"].colors;
oPopDiv = document.getElementById("popup");
oColorsUl = document.getElementById("colors_ul");
}
function clearColors(){
//清除提示内容
for(var i=oColorsUl.childNodes.length-1;i>=0;i--)
oColorsUl.removeChild(oColorsUl.childNodes[i]);
oPopDiv.className = "hide";
}
function setColors(the_colors){
//显示提示框,传入的参数即为匹配出来的结果组成的数组
clearColors(); //每输入一个字母就先清除原先的提示,再继续
oPopDiv.className = "show";
var oLi,temp;
for(var i=0;i<the_colors.length;i++){
//将匹配的提示结果逐一显示给用户
oLi = document.createElement("li");
oColorsUl.appendChild(oLi);
oLi.appendChild(document.createTextNode(the_colors[i].c+" " +the_colors[i].n1)); oLi.onmouseover = function(){
this.className = "mouseOver"; //鼠标经过时高亮
}
oLi.onmouseout = function(){
this.className = "mouseOut"; //离开时恢复原样
} oLi.onclick = function(){
//用户点击某个匹配项时,设置输入框为该项的值
oInputField.value = "¥" + this.firstChild.nodeValue.split(" ")[0];;
clearColors(); //同时清除提示框
}
}
}
function findColors(){
initVars(); //初始化变量
if(oInputField.value.length > 0){
var aResult = new Array(); //用于存放匹配结果
for(var i=0;i<aColors.length;i++) //从颜色表中找匹配的颜色
//必须是从单词的开始处匹配
if(aColors[i].c.indexOf(oInputField.value) == 0)
aResult.push(aColors[i]); //压入结果
if(aResult.length>0) //如果有匹配的颜色则显示出来
setColors(aResult);
else //否则清除,用户多输入一个字母
clearColors(); //就有可能从有匹配到无,到无的时候需要清除
}
else
clearColors(); //无输入时清除提示框(例如用户按del键)
}
</script>
</head>
<body>
<form method="post" name="myForm1">
Color: <input type="text" name="colors" id="colors" onkeyup="findColors();" />
</form>
<div id="popup">
<ul id="colors_ul"></ul>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>自动提示的文本框</title>
<style>
<!--
body{
font-family:Arial, Helvetica, sans-serif;
font-size:12px; padding:0px; margin:5px;
}
form{padding:0px; margin:0px;}
input{
/* 用户输入框的样式 */
font-family:Arial, Helvetica, sans-serif;
font-size:12px; border:1px solid #000000;
width:200px; padding:1px; margin:0px;
}
#popup{
/* 提示框div块的样式 */
position:absolute; width:202px;
color:#004a7e; font-size:12px;
font-family:Arial, Helvetica, sans-serif;
left:41px; top:25px;
}
#popup.show{
/* 显示提示框的边框 */
border:1px solid #004a7e;
}
#popup.hide{
/* 隐藏提示框的边框 */
border:none;
}
/* 提示框的样式风格 */
ul{
list-style:none;
margin:0px; padding:0px;
}
li{
text-align:right;}
li.mouseOver{
background-color:#004a7e;
color:#FFFFFF;
}
li.mouseOut{
background-color:#FFFFFF;
color:#004a7e;
}
-->
</style>
<script language="javascript">
var oInputField; //考虑到很多函数中都要使用
var oPopDiv; //因此采用全局变量的形式
var oColorsUl;
var aColors = [{c:"red",n1:"红色1",yx:1},{c:"redd",n1:"红色2",yx:2},{c:"reeed",n1:"红色3",yx:0},{c:"ratd",n1:"红色4",yx:0},{c:"reen",n1:"绿色1",yx:1},{c:"rblue",n1:"蓝色1",yx:0},{c:"magenta",n1:"洋红色1",yx:1},{c:"yellow",n1:"黄色1",yx:1}];aColors.sort(function(a, b) {
if (a.yx != b.yx) {
return b.yx-a.yx;
} else {
if (a.c > b.c) {
return 1;
} else {
if (a.c < b.c) {
return - 1;
} else {
return 0;
}
}
}
});
//按字母排序,使显示结果更友好
function initVars(){
//初始化变量
oInputField = document.forms["myForm1"].colors;
oPopDiv = document.getElementById("popup");
oColorsUl = document.getElementById("colors_ul");
}
function clearColors(){
//清除提示内容
for(var i=oColorsUl.childNodes.length-1;i>=0;i--)
oColorsUl.removeChild(oColorsUl.childNodes[i]);
oPopDiv.className = "hide";
}
function setColors(the_colors){
//显示提示框,传入的参数即为匹配出来的结果组成的数组
clearColors(); //每输入一个字母就先清除原先的提示,再继续
oPopDiv.className = "show";
var oLi,temp;
for(var i=0;i<the_colors.length;i++){
//将匹配的提示结果逐一显示给用户
oLi = document.createElement("li");
oColorsUl.appendChild(oLi);
oLi.innerHTML = the_colors[i].c+" <font color=\"red\">" +the_colors[i].n1+"</font>"; oLi.onmouseover = function(){
this.className = "mouseOver"; //鼠标经过时高亮
}
oLi.onmouseout = function(){
this.className = "mouseOut"; //离开时恢复原样
} oLi.onclick = function(){
//用户点击某个匹配项时,设置输入框为该项的值
oInputField.value = "¥" + this.firstChild.nodeValue.split(" ")[0];;
clearColors(); //同时清除提示框
}
}
}
function findColors(){
initVars(); //初始化变量
if(oInputField.value.length > 0){
var aResult = new Array(); //用于存放匹配结果
for(var i=0;i<aColors.length;i++) //从颜色表中找匹配的颜色
//必须是从单词的开始处匹配
if(aColors[i].c.indexOf(oInputField.value) == 0)
aResult.push(aColors[i]); //压入结果
if(aResult.length>0) //如果有匹配的颜色则显示出来
setColors(aResult);
else //否则清除,用户多输入一个字母
clearColors(); //就有可能从有匹配到无,到无的时候需要清除
}
else
clearColors(); //无输入时清除提示框(例如用户按del键)
}
</script>
</head>
<body>
<form method="post" name="myForm1">
Color: <input type="text" name="colors" id="colors" onkeyup="findColors();" />
</form>
<div id="popup">
<ul id="colors_ul"></ul>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>自动提示的文本框</title>
<style>
<!--
body{
font-family:Arial, Helvetica, sans-serif;
font-size:12px; padding:0px; margin:5px;
}
form{padding:0px; margin:0px;}
input{
/* 用户输入框的样式 */
font-family:Arial, Helvetica, sans-serif;
font-size:12px; border:1px solid #000000;
width:200px; padding:1px; margin:0px;
}
#popup{
/* 提示框div块的样式 */
position:absolute; width:202px;
color:#004a7e; font-size:12px;
font-family:Arial, Helvetica, sans-serif;
left:41px; top:25px;
}
#popup.show{
/* 显示提示框的边框 */
border:1px solid #004a7e;
}
#popup.hide{
/* 隐藏提示框的边框 */
border:none;
}
/* 提示框的样式风格 */
ul{
list-style:none;
margin:0px; padding:0px;
}
li{width:200px;float:left;}
li font{
float:right;}li span{
float:left;}
li.mouseOver{
background-color:#004a7e;
color:#FFFFFF;
}
li.mouseOut{
background-color:#FFFFFF;
color:#004a7e;
}
-->
</style>
<script language="javascript">
var oInputField; //考虑到很多函数中都要使用
var oPopDiv; //因此采用全局变量的形式
var oColorsUl;
var aColors = [{c:"red",n1:"红色1",yx:1},{c:"redd",n1:"红色2",yx:2},{c:"reeed",n1:"红色3",yx:0},{c:"ratd",n1:"红色4",yx:0},{c:"reen",n1:"绿色1",yx:1},{c:"rblue",n1:"蓝色1",yx:0},{c:"magenta",n1:"洋红色1",yx:1},{c:"yellow",n1:"黄色1",yx:1}];aColors.sort(function(a, b) {
if (a.yx != b.yx) {
return b.yx-a.yx;
} else {
if (a.c > b.c) {
return 1;
} else {
if (a.c < b.c) {
return - 1;
} else {
return 0;
}
}
}
});
//按字母排序,使显示结果更友好
function initVars(){
//初始化变量
oInputField = document.forms["myForm1"].colors;
oPopDiv = document.getElementById("popup");
oColorsUl = document.getElementById("colors_ul");
}
function clearColors(){
//清除提示内容
for(var i=oColorsUl.childNodes.length-1;i>=0;i--)
oColorsUl.removeChild(oColorsUl.childNodes[i]);
oPopDiv.className = "hide";
}
function setColors(the_colors){
//显示提示框,传入的参数即为匹配出来的结果组成的数组
clearColors(); //每输入一个字母就先清除原先的提示,再继续
oPopDiv.className = "show";
var oLi,temp;
for(var i=0;i<the_colors.length;i++){
//将匹配的提示结果逐一显示给用户
oLi = document.createElement("li");
oColorsUl.appendChild(oLi);
oLi.innerHTML = "<span>"+the_colors[i].c+"</span> <font color=\"red\">" +the_colors[i].n1+"</font>"; oLi.onmouseover = function(){
this.className = "mouseOver"; //鼠标经过时高亮
}
oLi.onmouseout = function(){
this.className = "mouseOut"; //离开时恢复原样
} oLi.onclick = function(){
//用户点击某个匹配项时,设置输入框为该项的值
oInputField.value = "¥" + this.firstChild.firstChild.nodeValue.split(" ")[0];;
clearColors(); //同时清除提示框
}
}
}
function findColors(){
initVars(); //初始化变量
if(oInputField.value.length > 0){
var aResult = new Array(); //用于存放匹配结果
for(var i=0;i<aColors.length;i++) //从颜色表中找匹配的颜色
//必须是从单词的开始处匹配
if(aColors[i].c.indexOf(oInputField.value) == 0)
aResult.push(aColors[i]); //压入结果
if(aResult.length>0) //如果有匹配的颜色则显示出来
setColors(aResult);
else //否则清除,用户多输入一个字母
clearColors(); //就有可能从有匹配到无,到无的时候需要清除
}
else
clearColors(); //无输入时清除提示框(例如用户按del键)
}
</script>
</head>
<body>
<form method="post" name="myForm1">
Color: <input type="text" name="colors" id="colors" onkeyup="findColors();" />
</form>
<div id="popup">
<ul id="colors_ul"></ul>
</div>
</body>
</html>
但又发现点小问题
IE浏览器在鼠标经过中间空白处的时候没有高亮变色。
firefox却在空白处却能高亮。
能有办法让IE兼容不?
<html>
<head>
<title>自动提示的文本框</title>
<style>
<!--
body{
font-family:Arial, Helvetica, sans-serif;
font-size:12px; padding:0px; margin:5px;
}
form{padding:0px; margin:0px;}
input{
/* 用户输入框的样式 */
font-family:Arial, Helvetica, sans-serif;
font-size:12px; border:1px solid #000000;
width:200px; padding:1px; margin:0px;
}
#popup{
/* 提示框div块的样式 */
position:absolute; width:202px;
color:#004a7e; font-size:12px;
font-family:Arial, Helvetica, sans-serif;
left:41px; top:25px;
}
#popup.show{
/* 显示提示框的边框 */
border:1px solid #004a7e;
}
#popup.hide{
/* 隐藏提示框的边框 */
border:none;
}
/* 提示框的样式风格 */
ul,li{
list-style:none;
margin:0px; padding:0px;
}
li{width:202px;float:left;position:relative;}
li font{
position:absolute;
right:0px;
top:0px;
}
.clear{clear:both;height:0;
font-size: 1px;
line-height: 0px;}li.mouseOver{
background-color:#004a7e;
color:#FFFFFF;
}
li.mouseOut{
background-color:#FFFFFF;
color:#004a7e;
}
-->
</style>
<script language="javascript">
var oInputField; //考虑到很多函数中都要使用
var oPopDiv; //因此采用全局变量的形式
var oColorsUl;
var aColors = [{c:"red",n1:"红色1",yx:1},{c:"redd",n1:"红色2",yx:2},{c:"reeed",n1:"红色3",yx:0},{c:"ratd",n1:"红色4",yx:0},{c:"reen",n1:"绿色1",yx:1},{c:"rblue",n1:"蓝色1",yx:0},{c:"magenta",n1:"洋红色1",yx:1},{c:"yellow",n1:"黄色1",yx:1}];aColors.sort(function(a, b) {
if (a.yx != b.yx) {
return b.yx-a.yx;
} else {
if (a.c > b.c) {
return 1;
} else {
if (a.c < b.c) {
return - 1;
} else {
return 0;
}
}
}
});
//按字母排序,使显示结果更友好
function initVars(){
//初始化变量
oInputField = document.forms["myForm1"].colors;
oPopDiv = document.getElementById("popup");
oColorsUl = document.getElementById("colors_ul");
}
function clearColors(){
//清除提示内容
for(var i=oColorsUl.childNodes.length-1;i>=0;i--)
oColorsUl.removeChild(oColorsUl.childNodes[i]);
oPopDiv.className = "hide";
}
function setColors(the_colors){
//显示提示框,传入的参数即为匹配出来的结果组成的数组
clearColors(); //每输入一个字母就先清除原先的提示,再继续
oPopDiv.className = "show";
var oLi,temp;
for(var i=0;i<the_colors.length;i++){
//将匹配的提示结果逐一显示给用户
oLi = document.createElement("li");
oColorsUl.appendChild(oLi);
oLi.innerHTML = "<div>"+the_colors[i].c+"</div> <font color=\"red\">" +the_colors[i].n1+"</font>"; oLi.onmouseover = function(){
this.className = "mouseOver"; //鼠标经过时高亮
}
oLi.onmouseout = function(){
this.className = "mouseOut"; //离开时恢复原样
} oLi.onclick = function(){
//用户点击某个匹配项时,设置输入框为该项的值
oInputField.value = "¥" + this.firstChild.firstChild.nodeValue;;
clearColors(); //同时清除提示框
}
}
}
function findColors(){
initVars(); //初始化变量
if(oInputField.value.length > 0){
var aResult = new Array(); //用于存放匹配结果
for(var i=0;i<aColors.length;i++) //从颜色表中找匹配的颜色
//必须是从单词的开始处匹配
if(aColors[i].c.indexOf(oInputField.value) == 0)
aResult.push(aColors[i]); //压入结果
if(aResult.length>0) //如果有匹配的颜色则显示出来
setColors(aResult);
else //否则清除,用户多输入一个字母
clearColors(); //就有可能从有匹配到无,到无的时候需要清除
}
else
clearColors(); //无输入时清除提示框(例如用户按del键)
}
</script>
</head>
<body>
<form method="post" name="myForm1">
Color: <input type="text" name="colors" id="colors" onkeyup="findColors();" />
</form>
<div id="popup">
<ul id="colors_ul"></ul>
<div class="clear"></div>
</div>
</body>
</html>
想让你帮我弄下,在输入r的时候能让文本提示框内c:的r变色不?