展开全部
用ajax技术实现的e69da5e887aa3231313335323631343130323136353331333330343866具体例子如下
如下是实现的代码，大家有需要的可以看下：
var xmlHttp; //ajax初始化对象
var arrOptions = new Array(); //初始化数组元素
var currentValueSelected = -1;//表示当前选中的某项
//判断输入的字符是否超过5个
function querybylength(){
var woId = document.getElementById("woId").value;
if(woId.length>=5){
//判断做什么动作
var intKey = -1;
if(window.event){
intKey = event.keyCode;
}
//alert(intKey);
if(intKey == 38){//按向上键
//alert(currentValueSelected);
if(currentValueSelected != -1){ //保证当前有用到SPAN
MoveHighlight(-1);
return false;
}
}else if(intKey == 40){ //按向下键
if(currentValueSelected != -1){ //保证当前有用到SPAN
MoveHighlight(1);
return false;
}
}else {
ajaxTest(woId); //初始化SPAN
}
}else {
HideTheBox();
currentValueSelected = -1;
}
}
//AJAX查询工单资料
function ajaxTest(name){
create();
if (xmlHttp==null){
alert ("您的浏览器不支持AJAX！");
return;
}
var url = "/spnewmes/servlet/QueryWOId?woId="+name;
xmlHttp.open("post",url,true);
xmlHttp.onreadystatechange = stateChanged;
xmlHttp.send(null);
}
function create(){
if (window.XMLHttpRequest) {
this.xmlHttp = new XMLHttpRequest();
}else if (window.ActiveXObject) {
this.xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
function stateChanged(){ //运行它进行ajax调用
if (xmlHttp.readyState==4){
var msg = xmlHttp.responseText; //获取返回值
arrOptions = msg.split(";");
//alert(arrOptions.length+":"+arrOptions);
if(arrOptions[0]!="")
Bulid(arrOptions); //给SPAN赋值
else
HideTheBox(); //隐藏SPAN
}
}
//创建并赋值span标签
function creatSpan(){
var elemSpan = document.createElement("span");//在页面创建span标签
elemSpan.id = "spanOutput";
elemSpan.className = "spanTextDropdown";
document.body.appendChild(elemSpan); //将上面创建的elemSpan元素加入到BODY的尾部
}
function Bulid(arrOptions){ //给SPAN赋值
var inner="";
SetElementPosition();//设置下拉框出现的位置
for(var i=0; i < arrOptions.length; i++){
//alert(i+":"+arrOptions[i]);
inner+=""+arrOptions[i]+"
";
}
document.getElementById("spanOutput").innerHTML = inner;
if(inner!=""){
//alert('init');
document.getElementById("arr_0").className ="spanHighElement";//设置第一个顶为默认选中
currentValueSelected=0;
}
}
function SetElementPosition(){ //设置下拉框出现的位置
var selectedPosX = 0;
var selectedPosY = 0;
var theElement = document.form1.woId;
if (!theElement) return;
var theElemHeight = theElement.offsetHeight;
var theElemWidth = theElement.offsetWidth;
while(theElement != null){
selectedPosX += theElement.offsetLeft;
selectedPosY += theElement.offsetTop;
theElement = theElement.offsetParent;
}
xPosElement = document.getElementById("spanOutput");
xPosElement.style.left = selectedPosX;
xPosElement.style.width = theElemWidth;
xPosElement.style.top = selectedPosY + theElemHeight
xPosElement.style.display = "block";
}
function HideTheBox(){//隐藏下拉框
document.getElementById("spanOutput").style.display = "none";
currentValueSelected = -1;
}
function SetHighColor(theTextBox){//当鼠标划过变为选中状态
document.getElementById('arr_' + currentValueSelected).className ='spanNormalElement';
if(theTextBox){
currentValueSelected = theTextBox.id.slice(theTextBox.id.indexOf("_")+1, theTextBox.id.length);
}
//alert('SetHighColor:'+currentValueSelected);
document.getElementById('arr_'+currentValueSelected).className = 'spanHighElement';
}
function SetText(){//选中下拉框中的某个值
var theTextBox = document.form1.woId;
theTextBox.value = arrOptions[currentValueSelected];
document.getElementById("woId").value = theTextBox.value;
HideTheBox();
}
function MoveHighlight(xDir){//设置上下移动键
var currnum=parseInt(parseInt(currentValueSelected)+parseInt(xDir));
//alert('MoveHighlight:'+currentValueSelected+'+'+xDir+'='+currnum);
if(currnum >= 0 && currnum
document.getElementById("arr_"+currentValueSelected).className ="spanNormalElement";
document.getElementById("arr_"+currnum).className ="spanHighElement";
currentValueSelected=currnum;
}else if(currnum==arrOptions.length){
document.getElementById("arr_"+currentValueSelected+"").className ="spanNormalElement";
currentValueSelected=0;
document.getElementById("arr_"+currentValueSelected+"").className ="spanHighElement";
}else if(currnum==-1){
document.getElementById("arr_"+currentValueSelected+"").className ="spanNormalElement";
currentValueSelected=arrOptions.length-1;
document.getElementById("arr_"+currentValueSelected+"").className ="spanHighElement";
}
}
已赞过
已踩过<
你对这个回答的评价是？
评论
收起
