Bootstrap的Typeahead有兩個來源和自定義分隔符

Question

是否可以使用自定義分隔符將兩個來源添加到Bootstrap Typeahead？

目前我有

source: function (query, process) { 
    ... 
     process(data.names.merge(data.areas)); 
    ... 
} 

但是我非常希望加入由兩個結果之間的自定義HTML。現在他們也顯示在一起，我希望他們在兩個單獨的列表中，自定義HTML是分隔符。

可能嗎？

Answer 1

答案是肯定的。您需要知道組合列表中的分隔符應該在哪裏出現，哪些將與用戶輸入的「查詢」（this.query）相匹配。

您可以通過重寫render方法，它需要將typeahead對象直接訪問做更改生成HTML：

var typeahead = $("#myTypeahead").typeahead(/* ... */).data('typeahead'); 

typeahead.render = function(items) { 
    var that = this 

    // this "map"s the items, which iterates over them and generates a new 
    // li for each item _by default_; I have modified it 
    items = $(items).map(function (i, item) { 
     // return an array containing raw HTML Elements 
     var elements = [] 

     // determine if separator is necessary, but make sure that it 
     // is not the first li (which this would be if it matched the 
     // i === 0 item!) 
     if (item === "worthSeparating") { 
      // put whatever you want as the separator in the elements array, 
      // which will appear in the position that you return it 
      // you probably don't want text, rather you want some CSS class 
      elements.push($("<li/>").addClass("menu-separator")[0]) 
     } 

     // ordinary li that is displayed: 
     i = $(that.options.item).attr('data-value', item) 
     i.find('a').html(that.highlighter(item)) 
     elements.push(i[0]) 

     return elements 
    }); 

    items.first().addClass('active') 
    this.$menu.html(items) 
    return this 
}; 

的render上述方法從默認的修改。你完全可以控制發生的事情。事實上，如果你不喜歡默認的菜單，然後你可以通過它被默認爲提供不同的選擇轉換菜單：

{ 
    menu: '<ul class="typeahead dropdown-menu"></ul>', 
    item: '<li><a href="#"></a></li>' 
} 

改變這些需要的render方法不同的變化。