jQuery에 대한 안내가 필요합니다. 검색 입력

Question

전체 페이지를 검색하기 위해 내 페이지에 검색 필드를 추가하려고합니다. 나는

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

를 참조하고 있는데 이걸 이해하지 못할. 이 방법을 아는 사람이 내 모바일 앱에서 검색 입력을 사용하는 방법을 설명해주세요.

검색 등을 발사하는 JS 방법을 설정하는 방법을하지 않도록 ..

는 시간 내 주셔서 감사합니다.

Answer 1

//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 특성에 유의하십시오. 이들은 검색 조건과 비교하여 검사되는 특성입니다.

Answer 2

이 링크는 검색 입력 텍스트 상자를 설정하는 방법을 보여줍니다. 실제 검색을 수행하는 것은 스스로 프로그래밍해야하는 항목입니다. 실제로 사이트의 모든 페이지를 검색하는 JavaScript 솔루션은 없습니다. 사이트의 단일 페이지를 검색하도록 자바 스크립트 솔루션을 설정할 수는 있지만 원하는 작업이 아닐 수도 있습니다.

당신은 검색 솔루션을 보려면 다음 링크 중 몇 가지를 살펴 할 수 있습니다 :

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

Google Custom Search