我需要關於jQuery搜索輸入的指導

我想在我的頁面上添加一個搜索字段來搜索整個頁面。我引用我需要關於jQuery搜索輸入的指導

http://jquerymobile.com/demos/1.0.1/docs/forms/search/index.html

，我不能把握這一點。有誰知道如何使用這個請解釋我如何使用我的移動應用程序的搜索輸入。

不知道如何設置js的方法來斷火的搜索等。

謝謝您的時間。

2012-02-27 partialdata

//wait for our page to be created by jQuery Mobile 
$(document).delegate('#page-id', 'pageinit', function() { 

    //cache the elements we want to show/hide based on the search input 
    var $filterDivs = $('.filter-div'); 

    //bind an event handler to the search input for when it's value changes 
    $('#search').bind('keyup change', function() { 

     //if the value of the input is nothing, then show all the elements 
     if (this.value == '') { 
      $filterDivs.slideDown(500); 

     //otherwise find only the elements that match what's in the search input 
     } else { 

      //create a regular expression based on the value of the search input 
      var regxp = new RegExp(this.value), 

       //get only the elements that match the search term(s) 
       $show = $filterDivs.filter(function() { 
        return ($(this).attr('data-filter').search(regxp) > -1); 
       }); 

      //hide the elements that do not match 
      $filterDivs.not($show).slideUp(500); 

      //and show the elements that do match 
      $show.slideDown(500); 
     } 
    }); 
});

演示：http://jsfiddle.net/jasper/cZW5r/1/

下面是基本的HTML結構用途：

<div data-role="fieldcontain"> 
     <label for="search">Search Input:</label> 
     <input type="search" name="password" id="search" value="" /> 
    </div> 
    <div class="filter-div" data-filter="one">1</div> 
    <div class="filter-div" data-filter="two">2</div> 
    <div class="filter-div" data-filter="three">3</div> 
    <div class="filter-div" data-filter="four">4</div> 
    <div class="filter-div" data-filter="five">5</div>

注意data-filter屬性，這些屬性是根據搜索項進行檢查的屬性。

來源

2012-02-27 20:48:57 Jasper