extjs 过滤下拉树
为了在正常的html中过滤掉下拉列表而付出了很多努力,我也使用了诸如自动补全等表格...这是过滤掉下拉列表最简单的解决方案
[HTML]
<SELECT NAME =“ drop” id ='drop'
onkeyup =“ editOption (arguments [0],this)” style ='width:100px; cursor: text'mode =“ 1” ><option value =“ 0”>默认</ option>
…
</ SELECT>
[/ HTML]
模式0:筛选列表,直到找到有效的匹配项为止;如果找不到有效的匹配项,则将充当文本框。 模式1:可编辑文本框,并在用户键入时过滤列表。 与模式0的不同之处在于,将在每一个点显示用户输入而不是过滤。 模式2:用户必须从可用列表中进行选择,无效条目将显示所选的第一个列表元素。 用户输入将过滤为可用的匹配项。 模式-1(默认):无效的输入将显示空下拉列表。
并且在您的页面中具有此脚本功能应该可以做到这一点。
function editOption(nse, obj)
{
var key = nse?nse.keyCode:event.keyCode;
if(key>=33 && key<=40)
{
return true;
}
var text = obj.getAttribute("filter");
if(typeof(text)=="undefined" || text==null)
{
text = "";
}
if(key==8 && text.length>0)
{
text = text.substring(0, text.length-1);
}
else if(key>31)
{
text += String.fromCharCode(key);
}
else
{
return true;
}
text = text.toLowerCase();
var plist = obj.getAttribute("list");
var list = [];
if(typeof(plist)=="undefined" || plist==null)
{
plist = "";
for(var i=0, ilen=obj.options.length; i<ilen; i++)
{
list[i] = [obj.options[i].text, obj.options[i].value];
plist += obj.options[i].text+":"+obj.options[i].value+",";
}
obj.setAttribute("list", plist);
}
else
{
var tlist = plist.split(',');
for(var i=0, ilen=tlist.length; i<ilen; i++)
{
list[i] = tlist[i].split(':');
}
}
for(var i=obj.options.length-1; i>=0; i--)
{
obj.options[i] = null;
}
var mode = obj.getAttribute("mode");
if(typeof(mode)=="undefined" || mode==null)
{
mode = -1;
}
var optn;
if(mode==1)
{
optn = document.createElement("OPTION");
optn.text = text;
optn.value = text;
optn.selected = true;
obj.options.add(optn);
obj.selectedIndex = 0;
}
for(var i=0, ilen=list.length; i<ilen; i++)
{
if(list[i][0].toLowerCase().indexOf(text)==0)
{
optn = document.createElement("OPTION");
optn.text = list[i][0];
optn.value = list[i][1];
if(mode==1)
{
optn.selected = false;
}
obj.options.add(optn);
}
}
if(obj.options.length==0)
{
if(mode==0)
{
optn = document.createElement("OPTION");
optn.text = text;
optn.value = text;
obj.options.add(optn);
}
else if(mode==2)
{
for(var i=0, ilen=list.length; i<ilen; i++)
{
optn = document.createElement("OPTION");
optn.text = list[i][0];
optn.value = list[i][1];
obj.options.add(optn);
}
obj.selectedIndex = 0;
text = "";
}
}
obj.setAttribute("filter", text);
return false;
}
翻译自: https://bytes.com/topic/javascript/insights/674042-filtered-drop-down
extjs 过滤下拉树