javascript - ドロップダウンボタン付きのブートストラップタイプアヘッド

Question

次の構造のように、選択したメニューに応じて異なる結果を表示する先行入力候補メニューが必要です。

var colors = ["red", "blue", "green", "yellow", "brown", "black"];
var numbers = ["One", "Two", "Three", "Four", "Five", "Six"];
var names = ["Ahmad", "Ali", "Hatem", "Wesam", "Nour", "Jeorge"];

$( "#search1" ).attr("autocomplete", "off");
$( "#search-fld" ).typeahead({source: colors});

$("#search-drop li a").click(function(){
    $("#search-btn").text($(this).text()); 
    if($(this).text() == 'People') {
        $( "#search-fld" ).typeahead({source: names});
    } else if($(this).text() == 'Salaries') { 
        $( "#search-fld" ).typeahead({source: numbers});
    } else if($(this).text() == 'Jobs') { 
        $( "#search-fld" ).typeahead({source: colors});
    }
});

jsfiddleとしての例を次に示します。しかし問題は、別のサブメニューを選択しても同じ結果が表示され続けることです。

さまざまなリソースからさまざまな先行入力結果を読み込む方法を知りたいです。

ご意見をお聞かせください、

===============================

===============================

Answer 1

これはうまくいくはずです：

$("#search-drop li a").click(function(){
        $("#search-btn").text($(this).text()); 
        if($(this).text() == 'People') {
            $( "#search-fld" ).data('typeahead').source = names;
        } else if($(this).text() == 'Salaries') { 
            $( "#search-fld" ).data('typeahead').source = numbers;
        } else if($(this).text() == 'Jobs') { 
            $( "#search-fld" ).data('typeahead').source = colors;
        }
});