2012-02-27 10 views
2

私はページ全体を検索するために私のページに検索フィールドを追加しようとしています。私は私はjQueryの検索入力に関するガイダンスが必要です

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

を参照すると私はこれを把握傾けます。これを使用する方法を知っている人は、モバイルアプリで検索入力をどのように使用できるか説明してください。

ない検索などをオフに解雇するのjs方法を設定する方法がわから..

はお時間をいただき、ありがとうございます。

答えて

4
//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ですこれが使用する構造:

属性がdata-filterであることに注意してください。これらの属性は検索語句に対してチェックされます。

1

このリンクは、検索入力テキストボックスの設定方法を示しています。実際の検索を行うことは、自分でプログラムする必要があります。サイトのすべてのページを検索するJavaScriptソリューションは実際にはありません。サイトの1ページを検索するJavaScriptソリューションをセットアップできますが、これはおそらくあなたがやりたいことではありません。

あなたは検索ソリューションを見るために、これらのリンクのいくつかを見てみたいことがあります

How to setup a simple site search for a simple website?

Google Custom Search

+0

ありがとうございます。 – partialdata

関連する問題