Typeahead:添加最后一个选项

时间:2014-03-02 01:13:10

标签: javascript jquery twitter-bootstrap bootstrap-typeahead

我正在使用Bootstrap v2.3.2,我有一个常规的预先设置,可以从数据库中获取数据。

我正在尝试这样做,以便每个typeahead的最后一个结果是“搜索<你输入的内容>”选项。因此,如果您在输入中键入“hello”,则最后一个选项(在所有其他结果下)将为Search for "hello"

如何做到这一点?

1 个答案:

答案 0 :(得分:1)

您需要修改Typeahead的源参数。

以下是我在网站上实现相同功能的方法: -

    $("#typeahead").typeahead({
        'source'=>function(query, process){
            return $.get("URL_OF_SEARCH", {string:query}, function(data){
                data = JSON.parse(data); 
                var list = $.map(data, function(item){
                     var aItem = {
                         id: item.id, name: item.text, picture: item.picture
                     }; 
                     return JSON.stringify(aItem);
                }); 
                //Till here everything was done to fetch previous results and show them
                list.push({"id":"URL_OF_SEARCH/" + query ,"name":"Search for "+query, "picture":"/favicon.ico"}); 
                //This above line adds the last row which you want to add
                return process(list);
             });
        },
        'highlighter'=>function(item){
            item = JSON.parse(item);
            var itm = "<div class='typeahead_wrapper'>"
            + "<img class='typeahead_photo' src='" + item.picture + "'/>"
            + "<div class='typeahead_labels'>"
            + "<div class='typeahead_primary'>" + item.name + "</div></div></div>";
            return itm;
        },
     });

我在列表中使用了3件事,一张图片,一个名字和一个链接(ID)。为了实现这一点,我还必须修改我的荧光笔功能。

我希望这会对你有所帮助。