2017-10-25 9 views
0

JSP와 AJAX 및 jquery를 사용하여 자동 완성을 구현하려고합니다. DIV 태그 내부의 검색 결과가 텍스트 상자 안에 후에도 I 명확한 내용을 삭제하지 않는일단 텍스트 상자를 지우면 이전 검색 결과를 지우는 방법

HTML 코드 :

<div class="form-group"> 
    <label for="message-text">Employee Name:</label> 
    <input ng-model="names" align="left" type="text" name="name" id="name" class="form-control" autocomplete="off" placeholder="Enter a Name" required /> 
    <div id="myDIV"> 
    <div id="nameList" class="namecontent"></div> 
    </div> 
</div> 

JQuery와 코드 :

$(document).ready(function() { 

    $('#name1').keyup(function() { 
     var query = $(this).val(); 
     if(query != '') { 

      $.ajax({ 
       url: "names.jsp", 
       method: "POST", 
       data: { query: query }, 
       success: function(data) { 
        $('#nameList1').fadeIn(); 
        $('#nameList1').html(data); 
       } 
      }); 
     } 
    }); 

    $(document).on('click','li',function() { 
     //alert($(this).text()); 
     $('#name1').val($(this).text()); 
     $('#nameList1').fadeOut(); 
    }); 

}); 

나는 모든 검색을 지우려면 결과, 텍스트 상자를 지운 후에. 누군가 이렇게하는 법을 도와 줄 수 있습니까? 당신은 단지 그것의 내용에서 nameList1을 지 웁니다 else를 추가 할 수 있도록

답변

0

이미, 경우 (query != '')을 확인하고 있습니다 :

if(query != '') 
{ 
    $.ajax({ 
     url:"names.jsp", 
     method:"POST", 
     data:{query:query}, 
     success:function(data) { 
      $('#nameList1').fadeIn(); 
      $('#nameList1').html(data); 
     } 
    }); 
} 
else { 
    // clear the results 
    $('#nameList1').html(''); 
} 
+0

감사합니다 :) 그것은 위의 코드에서 또한 – Dinu12

+0

을 열심히 때 검색 결과를 클릭하면 값이 중앙에옵니다. 나는 이것을 피하고 싶습니다. 무엇을 할 수 있습니까? – Dinu12