Question

我有下面的代码，当用户在自动完成搜索字段中输入3个字母时，如果有结果，它将显示结果。

例如，如果用户为会议名称引入3个字母，例如“ con”，则会显示“ conference 1”，“ conference”等。

如果用户介绍的城市名称如“新”，则显示为“纽卡斯尔”。

但是，您是否知道，是否没有与用户介绍的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>');

如何显示一条消息，说没有结果与自动完成搜索中的搜索相对应？

1 个答案: