【问题标题】:Bootstrap 3 + typeahead.js 0.9.3. Prompt if no results found引导 3 + typeahead.js 0.9.3。未找到结果时提示
【发布时间】:2013-08-15 20:47:12
【问题描述】:

现在 Bootstrap 已经放弃了 typeahead,他们推荐原生 twitter typeahead(在撰写本文时为 0.9.3)

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

在本机引导程序中,您可以这样做:http://bootply.com/61459

也许这个功能是不可能的?

【问题讨论】:

    标签: twitter-bootstrap typeahead.js


    【解决方案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
          }
        ]);
      });
    

    【讨论】:

      【解决方案2】:

      我试过了,它对我来说效果很好。
      这里我使用引导弹出窗口显示“未找到结果”。

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

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2014-10-15
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多