如何显示 "No Results Found" 和 typeahead.js？

Question

我试图在没有来自用户输入的建议时显示 results not found 消息。 typeahead.js 在向文本字段输入时显示输入建议..如果没有找到建议那么如何显示 results not found 消息？.. 版本是 typeahead.js0.11.1

Answer 1

如果没有结果可以用empty参数检查：

我对上面的代码进行了一些编辑，以帮助其他人搜索相同的内容。

$('.typeahead').typeahead({
    hint: false,
    highlight: true,
    minLength: 3,
},
{
    name: 'firstnames',
    displayKey: 'value',
    source: firstnames.ttAdapter(), // this is your result variable
    templates: {
        empty: function(context){
        //  console.log(1) // put here your code when result not found
          $(".tt-dataset").text('No Results Found');
        }
    }

Answer 2

我也有同样的问题。但是我使用 ajax 作为我的源而不是适配器。
如果建议长度为 0，您可以尝试添加弹出窗口。

function BindControls_facility(facility_names,facility_details,id) {
    var timeout;
    $('#facility_names'+id).typeahead({
        items: "all",
        // source: facility_names,
         source : function (query, result) {
              if (timeout) {
                    clearTimeout(timeout);
                }

                timeout = setTimeout(function() {
                        $.ajax({
                    url:  master_url + "/facility_name_dropdown_list",
                    method: 'POST',
                    xhrFields: {
                        withCredentials: false
                    },
                    data: { input_query : query},
                    success: function (data) {
                        if(Object.keys(data.facility_name).length > 0){
                            // $("#facility_names"+id).popover('destroy');
                             result($.map(data.facility_name, function (item) {
                                return item;
                            }));
                        }
                        else{
                             $('#facility_names'+id).popover({container: '#botdiv'+id,placement: 'top'}).popover('show');
                             $('#facility_names'+id).attr('data-content','No result found for \"'+$("#facility_names"+id).val()+'\"').data('bs.popover').setContent();
                             setTimeout(function () {
                                 $('#facility_names'+id).popover('destroy');
                             }, 2000);
                         }

                    }
                });
                }, 300);

        },
        hint: true,
        highlight: true,
        cache: true,
        compression: true,
        minLength: 3,
        updater: function(item) {
             var details = "";
              $.ajax({
                url:  master_url + "/get_facility_name",
                method: 'POST',
                xhrFields: {
                    withCredentials: false
                },
                data: { facility_name : item},
                success: function (data) {
                    console.log(data.status);
                }
            });
            return item;
        }
    });
}

我尝试使用 bootstrap-popover 显示此“未找到结果”警告。我知道这不是一个好的尝试，但如果我有同样的问题，我只是分享了我实现这一目标的方法。

如何显示 "No Results Found" 和 typeahead.js？

How to show "No Results Found" with typeahead.js?

javascript

jquery

typeahead.js