2016-10-04 7 views
0

jQuery로 검색 플러그인을 만듭니다.
항목을 검색 한 후 검색 입력에 엔터를 누르면 선택한 항목으로 리디렉션 할 페이지가 필요합니다. href.jQuery로 항목을 검색하고 Enter 키를 누르면 선택한 항목 링크로 리디렉션됩니다.

jQuery.expr[':'].contains = function (a, i, m) { 
 
    return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0; 
 
}; 
 

 

 
jQuery(function ($) { 
 

 
    $('input[name="search"]').keyup(function() { 
 

 
     var searchterm = $(this).val(); 
 

 
     if (searchterm.length > 1) { 
 
      var match = $('.item_name:contains("' + searchterm + '")'); 
 
      var nomatch = $('.item_name:not(:contains("' + searchterm + '"))'); 
 
      match.addClass('selected'); 
 
      nomatch.addClass('uk-hidden'); 
 

 
     } else { 
 
      $('.item_name').removeClass('uk-hidden'); 
 
      $('.item_name').removeClass('selected'); 
 
     } 
 

 
    }); 
 

 
    var statematch = $('.item_name:contains("استان")'); 
 
    statematch.remove().parent(); 
 
});
.uk-hidden{ 
 
    display: none; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="uk-search"> 
 
    <input class="uk-search-field" type="search" name="search" placeholder="search here"> 
 
</div> 
 
<div class="ad-city-list"> 
 
    <div class="item_name"><a href="tehran.html">Tehran</a></div> 
 
    <div class="item_name"><a href="istanbul.html">Istanbul</a></div> 
 
    <div class="item_name"><a href="tabriz.html">Tabriz</a></div> 
 
</div>

내가 어떻게 할 수 있습니까?

답변

1

이 시도 : 코드 아래

jQuery.expr[':'].contains = function(a,i,m){ 
      return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase())>=0; 
     }; 


     jQuery(function($) { 

      $('input[name="search"]').keyup(function(){ 

       var searchterm = $(this).val(); 

       if(searchterm.length >1) { 
        var match = $('.item_name:contains("' + searchterm + '")'); 
        var nomatch = $('.item_name:not(:contains("' + searchterm + '"))');    
        match.addClass('selected'); 
        nomatch.addClass('uk-hidden'); 


       } else { 
        $('.item_name').removeClass('uk-hidden'); 
        $('.item_name').removeClass('selected');     
       } 

      }); 

      var statematch = $('.item_name:contains("استان")'); 
      statematch.remove().parent(); 


       $(document).keypress(function(e) { 
         if(e.which == 13) { 
          var url1 = $('.item_name.selected:not(.uk-hidden) a').attr('href'); 
          $(window.location).attr('href', url1); 
         } 
        }); 
     }); 
+0

TNX 내 친구 당신의 방법은 더 정확하게 작업입니다 : - * –

1

사용.

$('input[name="search"]').bind('keypress', function(e) { 
    var code = e.keyCode || e.which; 
    if(code == 13) { //Enter keycode 
     var href = $(".ad-city-list").find(".selected:first").find("a:first").attr("href"); 
     if(href) 
     window.location.href = href; 
    } 
}); 
+0

TNX 내 친구 답변과 위의 대답은 모두가 나를 위해 일하지만, 그것이 온라인 선택된 클래스의 첫 번째 항목을 선택하고 문제가 몇 가지 경우 아이템은이 클래스를 가지고 있습니다. 올바른 아이템을 선택하지 마십시오. –

+0

예, 위의 코드에서 기본 클래스 만 선택 했으므로 첫 번째 아이템 만 선택합니다. 하나 이상의 선택 항목이있는 경우와 같이 제한을 둘 수 있습니다. 리디렉션하지 않으면 정확히 하나의 요소 만 일치 시키십시오. – Veer