首页 文章

使用Jquery Autocomplete处理“无结果”

提问于
浏览
1

嘿我正在尝试在用户当前查询没有结果时返回消息!我已经看过网络,并且有类似的情况,但我似乎无法使用下面的代码!任何人都可以帮我解决这个问题,因为我正在试着修理它!

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

提前致谢 .

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

1 回答

  • 0

    有几种方法可以解决这个问题 . 您可以创建 source 方法,以便如果过滤器的结果为空,则将"no results"添加为值,或者处理 response 事件以显示在ui中返回的结果 . 如果使用 source 方法,则添加一个select处理程序以防止No Result成为值 .

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

相关问题