可输入的下拉框,并能根据数据输入内容过滤
谁能教教我怎么用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 = document.getElementById("spanOutput");
xPosElement.style.left = selectedPosX;
xPosElement.style.width = theElemWidth;
xPosElement.style.top = selectedPosY + theElemHeight
xPosElement.style.display = "block";
}
function MoveHighlight(xDir){//设置上下移动键
var currnum=currentValueSelected+xDir;
if(currnum >= 0 && currnum<arrOptions.length ){
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";
}
}
function HideTheBox(){//隐藏下拉框
document.getElementById("spanOutput").style.display = "none";
currentValueSelected = -1;
}
function SetText(){//选中下拉框中的某个值
theTextBox = document.all("txtInput");
theTextBox.value = arrOptions[currentValueSelected];
document.getElementById("spanOutput").style.display = "none";
document.all("txtInput").value=theTextBox.value;
currentValueSelected = -1;
}
function SetHighColor(theTextBox){//当鼠标划过变为选中状态
if(theTextBox){
currentValueSelected =
theTextBox.id.slice(theTextBox.id.indexOf("_")+1,
theTextBox.id.length);
}
for(var i = 0; i < arrOptions.length; i++){
document.getElementById('arr_' + i).className ='spanNormalElement';
}
document.getElementById('arr_'+currentValueSelected).className = 'spanHighElement';
}