div의 특정 태그를 검색 한 다음 다른 태그를 표시하거나 숨기는 검색 창을 코딩 할 수 있습니까?

Question

데이터베이스 백엔드를 만들면 어떻게 든 html/css 페이지에 검색 상자를 만들 수 있습니다. 아마도 jquery를 사용하여 페이지에 4 개의 div 상자가 있고 각 div 상자에 특정 향미 텍스트 또는 키워드. 키워드를 검색 할 때 해당 키워드가 포함되지 않은 다른 div 상자를 숨긴 다음 해당 상자 만 표시하는 검색 상자를 만들 수 있습니까?

저는 jquery에서 .hide/.show /.toggle을 알고 있고 알고 있지만 그런 종류의 기능을 수행 할 간단한 검색 상자를 어떻게 코딩 할 것입니까? 누구든지 아이디어 나 일반적인 방향을 가지고 있습니까? 내가 여기 당신을위한 프로젝트를 수행하고 싶지만하지 않는

Answer 1

$("#search").on("keyup", function() { 
    var key = this.value; 
    $(".tosearch").each(function() { 
     var $this = $(this); 
     $this.toggle($(this).text().indexOf(key) >= 0); 
    }); 
}); 

데모 :이 대소 문자를 구분하는 검색을 수행하는 http://jsfiddle.net/upsgk/

참고. 대소 문자를 무시하려면 toLowerCase() 번으로 전화해야합니다. 예 : http://jsfiddle.net/upsgk/1/

Answer 2

는

var query= $('#search').val(); 
var str = $('#div1').val(); 

if (str.indexOf(query) >= 0){ 
    // display box 
} 
else{ 
    // hide box 
} 

Answer 3

네, 그것은 가능으로 시작하는 생각입니다.

1. 우선 ('입력 [타입 = "제출"])

   $를 사용 defautl 방지 검색 창을들을 클릭. (함수 (E) {e.preventDefault을()});

2. 검색 창 값을 얻기 위해 코드를 프로그래밍하십시오.

3. 숨기기 모든 div의 $("div").css("display","none");

4. 보기 아이디 여기 $("#"+valueOfBox").css("display","true");

Answer 4

을 가진 모든 div의 당신이 필요합니다 주요 구성 요소의 목록입니다 :

• inputtxt.value (jQuery를 : $("input").val()) : 텍스트 input 안에 쓰여진 값을 반환합니다.
• elm.innerHTML (jQuery : $("elm").html()) : 요소의 내용이 포함 된 문자열을 반환합니다.
• str.indexOf(pattern) : pattern의 첫 번째 발생 색인을 str에 반환합니다. pattern이 str에 없으면 .indexOf()은 -1을 반환합니다.

이 두 가지를 조합하면 little link과 같이됩니다. 코드는 꽤 자기 설명이지만, 여기에 자바 스크립트 부분의 주석 버전입니다 :

$("#search").on("keydown keyup keypress change", function() { //when the textbox is changed 
    var query = $("#search").val(); //save its content 
    $(".box").each(function() { //for each box 
     var cur = $(this); //get the current box 
     if(cur.html().indexOf(query) == -1) { //see if the current box contains the query 
      cur.hide("fast"); //it doesn't; hide it 
     } 
     else { 
      cur.show("fast"); //it does, show it 
     } 
    }); 
});