日期:2014-05-18  浏览次数:20845 次

可输入的下拉框,并能根据数据输入内容过滤
谁能教教我怎么用ajax做啊..给段代码给我看看..谢谢了.很急

------解决方案--------------------
你这需求还不如直接做一个自动补全的输入框,可编辑的下拉框没搞过,围观大牛
------解决方案--------------------
简单点就是直接用一个 text 覆盖select css处理的要好
------解决方案--------------------
 
/*
 * 说明:
 * 功能:提供类似于GOOGLE搜索功能的输入框
 * 接口说明:1、主文需定义txtInput输入文本框
 * 2、主文件需定义findType(搜索类型)变量
 */
var arrOptions = new Array();
var theTextBox;
var currentValueSelected = -1;//表当前选中的某项
var theTextOldValue="";
//以上设置一些全局变量
window.onload = function()
{
var elemSpan = document.createElement("span");//在页面创建span标签
elemSpan.id = "spanOutput";
elemSpan.className = "spanTextDropdown";
document.body.appendChild(elemSpan);
document.all("txtInput").onkeyup = txtInputKeyup;//当按键抬起调用此函数
}

function txtInputKeyup(){
var intKey = -1;
var temp="";
if(window.event){
intKey = event.keyCode;
theTextBox = event.srcElement;//获得事件源
}

if(theTextBox.value.length == 0 || theTextBox.name!="txtInput"){
HideTheBox();
return false;
}
if(intKey == 13){//按回车键
SetText();
theTextBox.blur();
return false;
}else if(intKey == 38){//按向上键
MoveHighlight(-1);
return false;
}else if(intKey == 40){ //按向下键
MoveHighlight(1);
return false;
}
if (theTextOldValue==theTextBox.value)
{
return false;
}
theTextOldValue=theTextBox.value;

//if($("txtInput").value==""||$("txtInput").value==temp)return;
NcBasedocGetlist.findBasdoc(//dwr技术,后台连接数据库
findType,document.all("txtInput").value,
function(datas){
arrOptions=datas;
BulidList(arrOptions);//建立下拉框
}
);
}

function BulidList(arrOptions){
if (arrOptions==null)
{
HideTheBox();
currentValueSelected=-1;
return;
}


var inner="";
SetElementPosition();//设置下拉框出现的位置
for(var i=0; i < arrOptions.length; i++){
inner+="<span style='width:300px;' id=arr_"+i+" class='spanNormalElement' onmouseover='SetHighColor(this)' onclick='SetText()'>"
+arrOptions[i]+"</span><br>";
}
document.getElementById("spanOutput").innerHTML = inner;

if(inner!=""){
document.getElementById("arr_0").className ="spanHighElement";//设置第一个顶为默认选中
currentValueSelected=0;
}else {
HideTheBox();
currentValueSelected=-1;
}
}
  
function SetElementPosition(){//设置下拉框出现的位置
var selectedPosX = 0;
var selectedPosY = 0;
var theElement = document.all("txtInput");
var theTextBoxInt = document.all("txtInput");
  
if (!theElement) return;
var theElemHeight = theElement.offsetHeight;
var theElemWidth = theElement.offsetWidth;
  
while(theElement != null){
selectedPosX += theElement.offsetLeft;
selectedPosY += theElement.offsetTop;
theElement = theElement.offsetParent;
}
xPosElement