검색하기 전에 내 추천 검색어 드롭 다운 표시를 중지하려면 어떻게합니까

Question

jquery를 사용하여 내 사이트의 검색 바를 사용하여 실시간 자동 추천 드롭 다운을 수행합니다. 떨어져 JQuery와

와 JQuery와 예 정보

////// HTML 양식에서 필드에 아무것도 밤은 그러나 임 문제를 가지고, 내가 자동차를 중지 할 방법을 보여주는에서 상자를 제안

 <div id="searchbox_largesearcher_bg"> 

     <div id="searchbox_signalbg"></div> 

     <form id="large-searcher" action="" method="post"> 

     <input name="large-search-form" id="large-search-form" type="text" size="35" onfocus="if (this.value == 'Search A Genre e.g. &quot;Hip-Hop&quot;') this.value = '';" onblur="if (this.value == '') this.value = 'Search A Genre e.g. &quot;Hip-Hop&quot;';" maxlength="35" value="Search A Genre e.g. &quot;Hip-Hop&quot;"/> 

     <input name="login" id="search_btn" class="search" type="submit" value="" /> 

     <div id="searchbox_searchicn"></div> 
     </form> 

     </div> 

     <div class="dropdown"> 

      <ul class="results"></ul> 

     </div> 

////// CSS 자동차에 대한

.dropdown { 
    -moz-border-bottom-colors: none; 
    -moz-border-image: none; 
    -moz-border-left-colors: none; 
    -moz-border-right-colors: none; 
    -moz-border-top-colors: none; 
    background-color: #F5F5F5; 
    border-radius: 5px 5px 5px 5px; 
    box-shadow: 0 1px 2px -1px #000000; 
    margin-left: 32px; 
    margin-top: -12px; 
    padding: 0; 
    position: absolute; 
    width: 460px; 
    z-index: 99; 
    } 


.results { 
    border: 1px solid #A2A1A1; 
    border-radius: 5px 5px 5px 5px; 
    list-style: none outside none; 
    padding-bottom: 7px; 
    padding-top: 7px; 
    width: 458px; 

    } 

.results li{ 
    border-bottom: 1px solid #EDEDED; 
    color: #A8A8A8; 
    cursor: pointer; 
    font-family: helvetica neue,helvetica,arial sans-serif; 
    margin-left: 20px; 
    margin-right: 20px; 
    padding-bottom: 14px; 
    padding-left: 25px; 
    padding-top: 10px; 

    } 

.results li:hover{ 
    background: none repeat scroll 0 0 #EEEEEE; 
    color: #A8A8A8; 

    } 

//////// jQuery를 제안

<script type="text/javascript"> 

// Large Index Page Live Returns Searcher 

$(document).ready(function(){ 
$('#large-search-form').keyup(function() { 

var search_term = $(this) .attr('value'); 

$.post('inc/resultsgrabber.php', {search_term:search_term}, function (data) { 

$('.results').html(data); 

$('.results li').click(function() { 
    var result_value = $ (this) .text(); 
    $('#large-search-form').attr('value', result_value); 
    $('.results').html(''); 
    }); 


}); 


}); 

}); 

Answer 1

CSS 문제로 밝혀졌습니다. 잘못된 장소에 패딩 및 경계선이 있습니다. jquery 코드는 완전히 괜찮습니다. 미안합니다.

Answer 2

가장 좋은 방법은 data 응답에 ajax 호출 후 응답이 있는지 확인하는 것입니다.

.results { display:none } 


$.post('inc/resultsgrabber.php', {search_term:search_term}, function (data) { 
    if (data == '') { 
    $('.results').html(data); 
    . 
    . 
    . 
    . 
    . 
    } 
});