Jquery 자동 완성을 사용하여 "결과 없음"처리

Question

안녕하세요 현재 사용자의 검색 결과가 없을 때 메시지를 보내려고합니다. 나는 그물 전체를 훑어 보았고 유사한 시나리오가 있지만 아래 코드로 작동하지 않을 수 있습니다! 아무도 내가 이것을 고치려고 내 머리카락을 당길 때 이것을 제발 이해할 수 있습니까?

결과를 스크롤하는 데 키보드를 사용할 수 있어야합니다. 사전에

감사합니다.

HTML

 
    <div id="search_box"> 
    <form id="search_form" autocomplete="off" action="" onSubmit="return false;"> 
     <input type="text" id="suggestSearchBox" value="Search by City or Hotel Name" onClick="this.value='';" /> 
    </form> 
    </div> 

자바 스크립트 참고 : 원격 데이터 소스가 자바 스크립트 배열을 인 "dataLocCodes"라고

있습니다

 
// JavaScript Document 
$(function() { 
    $("#suggestSearchBox").focus().autocomplete(dataLocCodes, { 
     max: 15, 
     selectFirst: true, 
     matchContains: true, 
     formatItem: function(row, i, max){ 
     if (row.hotelId) { 
     return row.accomName + ' - ' + row.city + ' - ' + row.country; 
     } else { 
     return row.city + ' - ' + row.country; 
     } 
    } 
}).result(
    function(event, row, formatted) { 
     $("input#suggestSearchBox").val(row.city + ' - ' + row.country); 
     var param = row.locparam; 
     var encoded_url = param.replace(/ /gi,"+"); 
     encoded_url = encoded_url.replace(/&/gi,"amp"); 
     window.location.href = "hotels.html?location=" + encoded_url; 
    }); 
}); 

Answer 1

몇 가지 방법을 처리하는 이. source 메서드를 만들면 필터 결과가 비어있는 경우 "결과 없음"을 값으로 추가하거나 response 이벤트를 처리하여 사용자가 반환 한 결과가없는 메시지를 표시 할 수 있습니다. source 메서드를 사용하는 경우 결과가 No가되지 않도록 선택 핸들러를 추가하십시오.

var availableTags = ['Abc', 'Def', 'ghi']; 
$('#noresults').autocomplete({ 
    source: function (request, response) { 
     var responses = $.ui.autocomplete.filter(availableTags, request.term); 
     if (responses.length == 0) responses.push('No Result'); 
     response(responses); 

    }, 
    response: function (event, ui) 
    { 
     if (ui.content.length == 0) { 
      console.log('No results'); 
     } 
    }, 
    select: function (event, ui) { 
     // don't let no result get selected 
     return (ui.item.value != 'No Result'); 
    } 
});