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

本文介绍了在多选列表框中使用Quicksilver样式进行jQuery实时搜索的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想让John Resig的与精选版一起使用多形式控制。他的代码基于开发他的代码。

I am trying to get John Resig's jQuery Live Search with Quicksilver Style to work with a select multi form control. His code is based John Nunemaker's Work developing his quicksilver.js code.

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

The problem I am having is that within a select box only Firefox supports .hide() on option values, I can't figure out a snappy approach for IE, Safari, Opera and Chrome.

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

Here is an example, I have inlined John R's code but you will need to grab quicksilver.js and host it locally yourself. Again this works great in Firefox but the call to rows.hide() does nothing on other browsers.

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

I have tried wrapping the tags in in a div and hiding that but no luck.

任何想法？

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

The best approach is just to add and remove options from the 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>

编辑：

需要对数组全部而不是行进行评分。

Need to score over array "all" rather than rows.

这篇关于在多选列表框中使用Quicksilver样式进行jQuery实时搜索的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！