javascript - 提前输入 : Adding a last option

标签 javascript jquery twitter-bootstrap bootstrap-typeahead

我使用的是 Bootstrap v2.3.2,并且我有一个常规的预输入设置,可以从数据库中获取数据。

我正在努力使每个预先输入的最后结果是选项“搜索<您输入的内容>”。因此,如果您在输入中键入“hello”,最后一个选项(在所有其他结果下方)将是 Search for “hello”

这将如何完成?

最佳答案

需要修改Typeahead的source参数。

这是我在我的网站上实现相同功能的方式:-

    $("#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)。为了实现这一点,我还必须修改我的荧光笔功能。

希望对你有帮助

关于javascript - 提前输入 : Adding a last option,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22122639/

相关文章:

javascript - 我的 JS 文件中的 HTML - 意外 token < 在 loadash.js 的第 1 行

php - jQuery 对话框下拉

jquery - 有没有办法防止 jQuery FullCalendar 中的事件重叠?

javascript - 根据 AJAX JSON 结果更改 HTML 数据

html - 如何使用 Flexbox 在 Bootstrap 4 中居中导航栏

html - 从 Bootstrap 3 中的表单元素选择中删除箭头

jquery - 使用具有分页和排序功能的 ajax 动态添加行到数据表

javascript - 无法在 Firefox 35 插件中创建内联 Web Worker

javascript - 重新排序从 PHP 数组呈现的 HTML

javascript - TransactionInactiveError 与后续的 put 调用