html页面中,如果select列表的option太多,会给选择带来一定的麻烦,我从这儿发现一个js库(下载),它允许你根据输入的关键字对option元素进行过滤。
下面是一段示例代码(demo):
html页面
<select size="5">
<option>one</option>
<option>two</option>
<option>three</option>
<option>four</option>
<option>five</option>
</select>
<br/>
<input value="search"/>
js片段(jQuery不是必须的)
var myfilter = new filterlist($("select")[0]);
$("input").focus(function() {
this.value = ""
}).keyup(function() {
myfilter.set(this.value)
})
以及一小点css
select{
width:6em;
}
input{
width:6em;
}
使用分析:
1、先获取select元素
2、将返回的select元素传递给filterlist构造函数,创建一个filterlist对象
3、在filterlist对象上设定要过滤的文本值
4、okay。更多特性请查看原文。
笔者刚才试着用jQuery写了一个作用和filterlist类似的代码(demo),其它部分不变,js代码如下
var $options = $("select").clone();
$("input").focus(function() {
this.value = ""
}).keyup(function() {
$("option").remove();
var key=this.value?":contains("+this.value+")":"";
$options.children(key).clone().appendTo($("select"));
})
惊讶地发现:
1、在chrome下,设置option元素的style.display=none,不会隐藏该option元素(其它浏览器没做测试,欢迎给出你的试验结果)
2、在keyup函数中,如果不使用clone方法($options.children(key).clone()),$options变量中保存的某些元素会在调用remove($("option").remove();)时,也被remove掉(我想这是因为附加到$("select")对象上的元素是$options对象内元素的引用,当然,引用的都是option)。