Javascript 在多选列表框中使用Quicksilver样式的jQuery实时搜索
我正在尝试让John Resig使用选择多表单控件。他的代码基于开发他的代码 我遇到的问题是,在一个选择框中,只有Firefox支持.hide on选项值,我无法为IE、Safari、Opera和Chrome找到一个快速的方法 这里是一个例子,我已经内联了John R的代码,但是您需要自己获取并在本地托管它。同样,这在Firefox中非常有效,但是对rows.hide的调用在其他浏览器上没有任何作用 我试过把标签包在一个小隔间里,然后把它藏起来,但运气不好 有什么想法吗Javascript 在多选列表框中使用Quicksilver样式的jQuery实时搜索,javascript,jquery,Javascript,Jquery,我正在尝试让John Resig使用选择多表单控件。他的代码基于开发他的代码 我遇到的问题是,在一个选择框中,只有Firefox支持.hide on选项值,我无法为IE、Safari、Opera和Chrome找到一个快速的方法 这里是一个例子,我已经内联了John R的代码,但是您需要自己获取并在本地托管它。同样,这在Firefox中非常有效,但是对rows.hide的调用在其他浏览器上没有任何作用 我试过把标签包在一个小隔间里,然后把它藏起来,但运气不好 有什么想法吗 <!DOCTYPE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>LiveSearch</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script type="text/javascript" src="../jquery/quicksilver.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#q').liveUpdate('#posts').focus();
});
jQuery.fn.liveUpdate = function(list){
list = jQuery(list);
if ( list.length ) {
// Changed 'li' to 'option' below
var rows = list.children('option'),
cache = rows.map(function(){
return this.innerHTML.toLowerCase();
});
this
.keyup(filter).keyup()
.parents('form').submit(function(){
return false;
});
}
return this;
function filter(){
var term = jQuery.trim( jQuery(this).val().toLowerCase() ), scores = [];
if ( !term ) {
rows.show();
} else {
rows.hide();
cache.each(function(i){
var score = this.score(term);
if (score > 0) { scores.push([score, i]); }
});
jQuery.each(scores.sort(function(a, b){return b[0] - a[0];}), function(){
jQuery(rows[ this[1] ]).show();
});
}
}
};
</script>
</head>
<body>
<form method="get" autocomplete="off" action="">
<div>
<input type="text" value="" name="q" id="q"><br><br>
<select id="posts" multiple name="choices" SIZE="10" style="width: 250px">
<option value="1">The Well-Designed Web</option>
<option value="2">Welcome John Nunemaker</option>
<option value="3">Sidebar Creative: The Next Steps</option>
<option value="4">The Web/Desktop Divide</option>
<option value="5">2007 in Review</option>
<option value="6">Don't Complicate the Solution</option>
<option value="7">Blog to Business</option>
<option value="8">Single Line CSS</option>
<option value="9">The Great Divide</option>
<option value="10">What's in a Name?</option>
</select>
</div>
</form>
</body>
</html>
最好的方法就是从DOM中添加和删除选项 像这样:
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#q').liveUpdate('#posts').focus();
});
jQuery.fn.liveUpdate = function(list){
list = jQuery(list);
if ( list.length ) {
// Changed 'li' to 'option' below
var rows = list.children('option'),
cache = rows.map(function(){
return this.innerHTML.toLowerCase();
});
var all = rows;
all.each(function(i){
$(this).attr("itext", this.innerHTML.toLowerCase());
});
this
.keyup(filter).keyup()
.parents('form').submit(function(){
return false;
});
}
return this;
function filter(){
var term = jQuery.trim( jQuery(this).val().toLowerCase() ), scores = [];
if ( !term ) {
list.append(all);
} else {
rows.remove();
all.each(function(i){
var score = $(this).attr("itext").score(term);
if (score > 0) { scores.push([score, i]); }
});
jQuery.each(scores.sort(function(a, b){return b[0] - a[0];}), function(){
list.append(all[this[1]]);
});
rows = list.children('option');
}
}
};
</script>
编辑:
需要对所有数组而不是行进行评分。因此,基本上,您是在寻找一种跨浏览器的方式来隐藏选项?是的,到目前为止,它只在Firefox中有效,非常有魅力,谢谢您-我一直在用头撞桌子。一个后续问题,有谁知道一种添加延迟的好方法,这样如果用户快速键入多个键,它就不会调用filter every keyup?在几千个选项中,它可能会变得非常慢。您应该为此创建一个新问题,但简而言之,您可以使用javascript的内置setTimeout/clearTimeout方法在过滤之前添加延迟。