Bootstrap 建议模板在typeahead中不起作用

yvgpqqbh 于 2023-08-01 发布在 Bootstrap

关注(0)|答案(1)|浏览(75)

我正在使用typeahead填充搜索建议。我可以看到在控制台的建议，但无法填充它与html模板。请在下面找到我使用的源代码。

$.typeahead({
            input: '.js-typeahead',
            minLength: 0,
            order: "asc",
            hint: true,
            searchOnFocus: true,
            dynamic: true,
            delay: 500,  
            source: {
                ajax:{
                    type: "POST",
                    url: "/my-url/",
                    data: {
                       q1: 'blah',
                       q2: "{{query}}"
                    },
                    success: function (data) {
                        $.map(data['data'], function(venue, index) {
                        // console.log(venue["name"])
                            // console.log(venue)
                            return venue;
                        });
                    }
                },

                error: function(err){
                    console.log('ERROR : ', err);
                }
            },
            display: ["name"],
            template: '<div>' +
                        '   <span class="lname">{{name}}</span>' +
                        "</div>",
            debug: true
        });

字符串
然而，它在控制台中工作正常，但无法使用HTML渲染它。

感谢您的帮助！***

twitter-bootstrap

来源：https://stackoverflow.com/questions/44797932/suggestion-template-not-working-in-typeahead

1条答案

按热度按时间

fzwojiic1#

您在模板中遗漏了“% s”，并且没有提供哪个模板。下面是一个示例，其中底层数据是ID为.id的JSON和要显示.name的文本：

$('#search').typeahead({
    highlight: true
},
{
    source: bloodhound,
    display: 'name',
    templates: {
        // d looks like { id: 0, name: "Ford", _query: 'fo" }
        // Where id and name are all properties of data objects in the JSON results,
        // and _query is inserted by Typeahead telling you what has been typed so far
        // The code in this method will need to handle highlighting as its own task
        // The outer tag will
        suggestion: d => {
            const s = d.name.replace(d._query, '<strong>$&</strong>');
            return `<div class=simple>${s}</div>`;
        }
    }
});

字符串

赞(0）回复(0）举报 2023-08-01

我来回答

Bootstrap 建议模板在typeahead中不起作用

1条答案

相关问题

热门标签

最新问答