如何顯示提示沒有結果與自動完成搜索中的搜索相對應的消息？

Question

我有下面的代碼，當用戶在自動完成搜索字段中輸入3個字母時，如果有結果，它將顯示結果。

例如，如果用戶為會議名稱引入3個字母，例如“ con”，則顯示為“ conference 1”，“ Conference”等。

如果用戶介紹一個城市名稱，例如“ New”，則會出現“ Newcastle”。

但是，您是否知道，是否沒有與用戶介紹的3個字母相對應的結果，如何顯示類似“沒有結果與搜索相對應”的信息？

$("#search").catcomplete({
    source: "{{ URL::to('autocomplete-search') }}",
    minLength: 3,
    select: function(conference, ui) {
        if(ui.item.category=="Conferences"){
            window.location.href = ui.item.url;
        }
        else{
            $.get(ui.item.url, function(result) {
                var newConferences = '';
                let imageUrl = ! conference.image ? '/img/test.png' : conference.image;
                var placeholder = "{{route('confeerences.show', ['id' => '1', 'slug' => 'demo-slug'])}}";

                $.each(result, function(index, conference) {
                    var url = placeholder.replace(1, conference.id).replace('demo-slug', conference.slug);
                    newConferences += '<div>\n' +
'                        <div>\n' +
'                            <img src='+ imageUrl +' alt="Card image cap">\n' +
'                            <div>\n' +
'                                <h5>'+conference.name+'</h5>\n' +
'                            </div>\n' +
'                    </div></div>';
                });
                // add the HTML to the #conferences div
                $('#conferences').html(newConferences);
            }, 'json');
        }
    }
});

Answer 1

您只需要一個條件即可檢查返回結果的長度：

if (result.length) {
  $.each(result, function(index, conference) {
    // build the newConferences string
  });
  // add the HTML to the #conferences div
  $('#conferences').html(newConferences);
} else {
  $('#conferences').html('No results correspond to the search.');
}

更新

else塊的html必須是字符串：

$('#events').html('<div class="alert alert-info" role="alert">' +
                  '<strong>' +
                  '   <i class="fa fa-info" aria-hidden="true"></i>' +
                  '</strong>' +
                  'No results correspond to the search' +
                  '</div>');