Typeahead.js將對象中的類輸出到結果

我使用typeahead從數據庫中提取建議，通過下面的代碼將它們作爲對象數組提供，然後將第一個值拉入建議中需要第二個輸出作爲圍繞結果的類。Typeahead.js將對象中的類輸出到結果

喜歡跨度類= 「FLAG- {VAL 1}」>建議

任何幫助不勝感激。

$('#typeahead').typeahead(null, { 
    source: function(query, process) { 
     $.ajax({ 
      url: 'source.php', 
      type: 'POST', 
      data: 'query=' + query, 
      dataType: 'JSON', 
      async: true, 
      success: function (data) { 
       var suggestions = []; 
       $.each(data, function(key, val) { 
        var obj = {}; 
        obj.label = val; 

        suggestions.push({ value: val[0] }); 
        console.log({value: val[0]}, {value: val[1]}); 
       }); 
       return typeof data == 'undefined' ? false : process(suggestions); 
      } 
     }); 
    } 
});

console log

來源

2014-06-16 tbwcf

你有沒有看過http://twitter.github.io/typeahead.js/examples/ –

@DaveBriand上的自定義模板我非常感謝 - 沒有安靜的給我我需要的東西，現在已經想出了一個很好的簡單解決方案。謝謝 – tbwcf

很好聽 - 我在下面看到你的答案。 –

我猛然從工作開車回家，我可以試試這個：

suggestions.push({ value: '<span class="flag flag-'+val[1]+'">'+val[0]+'</span>' });

，並不會實際需要通過改變預輸入模板，使事情變得複雜。有用！ :)

除此之外 - 將span標記添加到輸入中我創建了一個函數來刪除這些... $（document）.on（'click keyDown：focus：active'，'.tt- （e）{ cleanSuggestion（）; e.preventDefault（）; }）;

$(document).on('keydown', '.tt-input, .typeahead, .tt-hint', function(e){ 
     if(e.which == 38||e.which == 40||e.which == 13) { 
      cleanSuggestion(); 
     } 
    }); 

    $(document).on('blur', '.tt-input', function(e){ 
     setTimeout(function(){ 
      cleanSuggestion(); 
     }, 1); 
    });  

    function cleanSuggestion() { 
     var registeredValue = $('#registered-stallion').attr('value') 
     registeredValue = registeredValue.replace(/(<([^>]+)>)/ig,""); 
     $('#registered-stallion').attr('value', registeredValue);   
    }

出於某種原因，模糊功能將只能與超時工作，我不能清楚地看到預輸入被reint這裏它的功能..

來源

2014-06-16 18:26:49 tbwcf

啊，除了...點擊時跨度推入了建議。坦率的 – tbwcf

你可能想看看創建一個小的模板引擎，並使用它 - 虐待張貼在答案，所以它可以格式化 –

謝謝@DaveBriand如果你有時間模擬一個非常值得讚賞的例子，到目前爲止，我還沒有很好的模板運行 - 可能缺少一些明顯的東西。 – tbwcf

我用模板underscorejs，這增加了編譯功能強調。 Typeaheadjs在從模板構建時使用編譯。

_.compile = function(templ) { 
    var compiled = this.template(templ); 
    compiled.render = function(ctx) { 
     return this(ctx); 
    } 
    return compiled; 
}

根據github頁面上的示例，您現在可以使用模板。

來源

2014-06-16 21:43:09

感謝戴夫，不幸的是，模板仍在我的頭上。我已經成功地在插入全部標籤之前去除了span標籤，並且在模糊的工作狀態下進行了非常哈希的超時。更新我的回答以顯示。 – tbwcf

Typeahead.js將對象中的類輸出到結果

回答

相關問題