загрузочный шрифт с выпадающей кнопкой

Я хочу, чтобы в меню предложений ввода отображались разные результаты в соответствии с выбранным меню, например следующая структура:

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. Но проблема в том, что одни и те же результаты продолжают появляться, даже если я выбираю другое подменю.

Я хочу знать, как загружать разные результаты ввода с разных ресурсов.

Пожалуйста посоветуй,

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

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