Question

我正在努力让John Resig的jQuery Live Search with Quicksilver Style使用精选的多表单控件。他的代码基于John Nunemaker's Work开发了他的quicksilver.js代码。

我遇到的问题是，在选择框中只有Firefox支持.hide（）选项值，我无法找到适合IE，Safari，Opera和Chrome的快捷方法。

这是一个例子，我已经列出了John R的代码，但你需要抓住quicksilver.js并自己在本地托管它。同样，这在Firefox中很有用，但对rows.hide（）的调用在其他浏览器上没有任何作用。

我尝试将标签包装在div中并隐藏但没有运气。

有什么想法吗？

<!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>

Answer 1

最好的方法是添加和删除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>

修改

需要对阵列“全部”而非行进行评分。

在多选列表框中使用Quicksilver样式进行jQuery实时搜索

1 个答案: