Bootstrap 3 + typeahead.js 0.9.3. 如果没有找到结果，会提示用户。

Question

现在Bootstrap已经放弃了typeahead，他们推荐使用本地的twitter typeahead（在撰写本文时为0.9.3）。

我无法找到如何在没有结果时提示用户的示例。

在原生的Bootstrap中，您可以这样做：http://bootply.com/61459 也许这种功能不可能实现？

- Nate

Answer 1

这个怎么样？

  $(document).ready(function() {
    $("#search").typeahead([
      {
        limit: 10,
        remote: {
          url: "//my.tld/gimmesomejson.php?searchuser=%QUERY",
          filter: function(parsedResponse) {
            var dataset = [];
            for (i = 0; i < parsedResponse.length; i++) {
              dataset.push({
                value: parsedResponse[i].value,
                tokens: parsedResponse[i].tokens
              });
            }
            if (parsedResponse.length == 0) {
              dataset.push({
                value: "No results" 
              });
            }
            return dataset;
          },
        },
        template: '<p>{{value}}</p>',
        engine: Hogan
      }
    ]);
  });

- Ian

Answer 2

我尝试了这个方法，对我来说效果很好。
在这里，我使用Bootstrap弹出框来显示“未找到结果”。

 $('#facility_names'+id).typeahead({
        items: "all",
        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;
        }
    });

- Bhuvanesh