使用下拉按钮引导预输入答案

【问题标题】：bootstrap typeahead with dropdown button使用下拉按钮引导预输入
【发布时间】：2013-04-03 21:01:43
【问题描述】：

我希望 typeahead 建议菜单根据所选菜单显示不同的结果，如下结构：

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 的示例。但问题是，即使我选择不同的子菜单，仍然会出现相同的结果。

我想知道如何从不同的资源加载不同的 typeahead 结果。

请指教，

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

【问题讨论】：

我看到你的回复格式不正确，应该是像["a lite job 1", "accounting/banking/finance", "admin"]这样的js数组。
你能告诉我如何格式化它，我应该把响应放在一个数组中并从数组中获取数据吗？感谢您的所有帮助
您应该以 json 格式返回您的数据。我不确定你的后端语言是什么，但例如在 PHP 中它看起来像：$data = array("red", "blue", "green", "yellow", "brown", "black"); $response = json_encode($data);
尝试像这样$( "#search-fld" ).data('typeahead').source = JSON.parse(data); 更新您的预输入源
第一次绑定 typeahead 时设置minLength 属性。查看小提琴jsfiddle.net/mqqQZ/6

标签： javascript jquery twitter-bootstrap bootstrap-typeahead

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

【讨论】：

如何为这个例子添加远程数据结果？请指教。
如果你想动态加载你的数据，我建议使用 ajax 调用后端脚本来进行数据库查询，例如。这就是它的样子：if($(this).text() == 'People') { $.post('/query', { type: 'People' }, function (data) { $( "#search-fld" ).data('typeahead').source = data; }); }
嗨，我使用了 $.get('/autocomp/keywords.adp', { type: 'key', country:usa}, function (data) { $( "#search-fld" ).data('typeahead').source = data; });我可以看到请求以 200 状态成功获得，并看到来自开发人员工具的响应词，但是当我想尝试自动完成时，它会重复我输入的字符 8 次，当我输入第二个或第三个字符时，自动完成列表消失
我从请求中得到的响应列表包含很多词，例如：admin、list、state、ededes .....
if($(this).text() == 'People') { if($(this).text() == 'People') { $.post('/query' , { type: 'People' }, function (data) { $( "#search-fld" ).data('typeahead').source = data; }); } 和我可以看到的响应结果：