javascript填充 javascript填空题

自动提示文本框首先离不开文本框本身、而提示框则采用

块内嵌项目列表

• 来实现。当前用户在文本框中每输入一个字符(onkeyup事件)时就在预定的"颜色名称集(功能很小很小)"中查找、找到匹配的项就动态加载到

• 中、显示给用户选择、HTML代码如下：

Color:

考虑到

块的位置必须出现在输入框的下面、因此采用css的绝对定位、并设置两个边框属性、一个用于有匹配结果时显示提示框

、另一个用于未查到匹配结果时隐藏提示框。相应的页面设置和表单的css样式如下：

当用户在文本框中输入任意一个字符时、则在预定好的"颜色名称集"中搜索。如果找到匹配的项则存在一个数组中、并传递给显示提示框的函数setColors()、否则利用函数clearColors()清除提示框、代码如下：

var oInputField;
var oPopDiv;
var oColorsUl;
var aColors = ["red","green","blue","magenta","yellow","chocolate","black" +
"","darkcyan","darkgreen","darkhaki","ivory","darkmagenta","cornfloewrblue" +
"","bcksa","cgsa","rdgdsa","hfdsa","rqga","bhfdag","cadgdsa"];
aColors.sort(); //按字母排序
function initVars(){
//初始化变量
oInputField = document.forms["myForm1"].colors;
oPopDiv = document.getElementById("popup");
oColorsUl = document.getElementById("colors_ul");
}
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(); //无输入时清除提示框
}

所谓的"颜色名称集合"就是一个特定的数组aColors、里面存放了很多预定好的颜色名称、实际运用中这个数组应该是服务器上的动态数据、明天来加上、用Ajax方式把后台数据查询出来、付给这个数组。其实很简单、然而数据库怎么存储、跟查询时sql语句的拼写、就很重要了、不过我基本上一点也不了解这方面的东西！

setColors()和clearColors()分别用来显示和清除提示框、用户每输入一个字符就调用一次findColors()函数、找到匹配项时调用setColors()、否则调用clearColors()。

传递给setColors()的参数是一个数组、里面存放着所有匹配用户输入的数据、因此setColors()的职责就是将这些匹配项一个个放入

中、并添加到

• 里、而clearColors()则直接清除整个提示框即可。代码如下：

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(); //同时清除提示框
}
}
}

在给提示框中的每一项

添加鼠标事件、鼠标经过时高亮显示、单击鼠标时则自动将选项赋给输入框、并清空提示框。

• 的css样式风格如下：

图是运行效果、IE8跟火狐都行：

完整代码如下：

String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
匹配用户输入 
    
var oInputField;
var oPopDiv;
var oColorsUl;
var aColors = ["red","green","blue","magenta","yellow","chocolate","black" +
"","darkcyan","darkgreen","darkhaki","ivory","darkmagenta","cornfloewrblue" +
"","bcksa","cgsa","rdgdsa","hfdsa","rqga","bhfdag","cadgdsa"];
aColors.sort(); //按字母排序
function initVars(){
//初始化变量
oInputField = document.forms["myForm1"].colors;
oPopDiv = document.getElementById("popup");
oColorsUl = document.getElementById("colors_ul");
}
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(); //无输入时清除提示框
}
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(); //同时清除提示框
}
}
}

Color: