1

嘿我试图返回一条消息,当用户目前的查询没有结果!我已经看遍了所有的网络,也有类似的情况,但我似乎无法让我的代码在下面工作! 任何人都可以帮我解决这个问题,因为我拉我的头发试图修复它!处理“没有结果”与Jquery自动完成

我需要保持使用键盘向下滚动结果的能力。

在此先感谢。

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> 

的Javascript 注:远程数据源被称为 “dataLocCodes”,这是一个JavaScript阵列

 
// 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; 
    }); 
}); 

回答

0

有一对夫妇的方式来处理这个。您可以创建source方法,以便如果筛选器的结果为空,则将“无结果”添加为值,或者处理response事件以显示在您的用户界面中返回没有结果的消息。如果使用source方法,则添加一个选择处理程序以防止无结果成为值。

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'); 
    } 
});