DatePicker + 검색 테이블의 텍스트 상자

&을 검색하는 텍스트 상자에 DatePicker 개체를 첨부하여 날짜 (날짜, 파일 이름 [실제 .html 파일을 열 수있는 링크 포함)] 테이블을 날짜별로 필터링합니다. 테이블은 고유 한 날짜만으로 채워 지므로 날짜를 검색 할 때 하나의 결과 만 남게됩니다.DatePicker + 검색 테이블의 텍스트 상자

내 질문은 : datepicker/searchbox를 테이블 밖으로 필터링 한 다음 결과가 있는지 확인하려면 어떻게해야합니까? 그런 다음 사용자가 파일 이름을 클릭하여 열지 않고 직접 파일을 엽니 다. 검색된 날짜가있는 파일이 없으면 경고 메시지 나 다른 것을 제공하십시오. 여기

코드입니다 :

<html lang="en"> 

    <head> 
     <meta charset="utf-8"> 
     <link rel="stylesheet" type="text/css" href="ess_style.css"> 
     <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> 
     <link rel="stylesheet" href="/resources/demos/style.css"> 
     <script type="text/javascript" src="jquery-latest.js"></script> 
     <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
     <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 
    </head> 

    <body> 
     <div id="esstable"> 
      <input type="text" id="searchess" placeholder="ESS Date Search" style="float:left; margin:10; vertical-align:top"></input> 
      <table border="1" id="table_side2"> 
       <tbody> 
        <tr> 
         <th>Date</th> 
         <th>ESS File</th> 
        </tr> 
        <tr> 
         <td>3/17/2014 </td> 
         <td> <a href="./file1.html"> file 1 </a> </td> 
        </tr> 
        <tr> 
         <td>3/22/2014 </td> 
         <td> <a href="./file2.html"> file 2 </a> </td> 
        </tr> 
       </tbody> 
      </table> 
     </div> 


     <script> 
      //datepicker 
      $(function() { 
       $("#searchess").datepicker({ 
        dateFormat: "m/dd/yy", 
        onSelect: function() { 
         $("#searchess").trigger('keyup') 
        } 
       }); 
      }); 

      //search textbox 
      $("#searchess").keyup(function() { 
       if(typeof String.prototype.trim !== 'function') { 
        String.prototype.trim = function() { 
         return this.replace(/^\s+|\s+$/g, ''); 
        } 
       } 

       var value = this.value.trim(); 

       $("#esstable").find("tr").each(function(index) { 
        if (!index) return; 
        var id = $(this).find("td").first().text().trim(); 
        $(this).toggle(id.indexOf(value) !== -1); 
       }); 
      }); 

      //script to populate table 
      $.getScript('index.js'); 

     </script> 

    </body> 

</html>

출처

2014-04-08 DaPhunk

- 당신이 할 필요가 같이 location.href 또는 어떤 다른 사람을 변경하는 업데이트 . – Dave

@Dave 나는 거기에 쓸 코드가 무엇인지 모르겠습니다. 예를 들어 주시겠습니까? – DaPhunk

그러나 테이블에없는 날짜를 검색하면 어떻게됩니까? 페이지로 이동할 수 있기 전에 결과가 발견되었는지 여부를 알기 전에 검색을 완료해야하는 것처럼 보입니다. – jwatts1980

이 시도 :

당신은 이미 onSelect를이 날짜 선택기에 대한 정의

//search textbox 
$("#searchess").keyup(function() { 
    if(typeof String.prototype.trim !== 'function') { 
     String.prototype.trim = function() { 
      return this.replace(/^\s+|\s+$/g, ''); 
     } 
    } 

    var value = this.value.trim(); 

    $("#esstable").find("tr").each(function(index) { 
     if (!index) return; 
     var id = $(this).find("td").first().text().trim(); 
     $(this).toggle(id.indexOf(value) !== -1); 
    }); 

    //At this point the search is complete... 
    //See if there is one option: 
    if ($("#esstable tr:visible").length == 2) { 
     //get the url of the link 
     var url = $("#esstable tr:visible td a").attr("href"); 

     //go to the link 
     window.location.href = url; 
    } 
});

출처

2014-04-08 15:05:48 jwatts1980

': visible' 선택자와 관련된 몇 가지 편집을했습니다. 나는': visible'이 켜져 있어야만하는'tr'을 토글하고 있기 때문에 생각합니다. – jwatts1980

나는 그것을 시도, 어떤 효과가 없었어요. 차이가 나는 경우 파일은 두 번째 열에 있습니다. – DaPhunk

죄송합니다. 선택기를 잘못된 위치에서 계속 사용했기 때문에 코드를 6 번 편집했습니다. 트릭이': visible' 의사 선택기가 될 것이라고 생각합니다. JSFiddle에서 이것을 테스트 할 것입니다 ... – jwatts1980

DatePicker + 검색 테이블의 텍스트 상자

답변

관련 문제