Подсветка шрифтов, как реализовать - PullRequest
0 голосов
/ 29 апреля 2020

Привет! Я хочу реализовать подсветку текста в заголовке. Просто интересно, как бы я это сделал с моим текущим кодом - учитывая, что мои результаты отображаются в другом div, а не внутри tt-dropdown-menu. Нужно ли мне использовать Bloodhound для этого? Спасибо

$(".global-search").typeahead(
    {
        hint: false,
        highlight: true,
        minLength: 2,
    },
    {
        name: "search",
        source: function (str, async) {
            restCall(str, async);
        },
    }
);
// The function that will make the REST call and return the data
function restCall(str, async) {
    return $.ajax("http://localhost:5000/search?term=" + str, {
        headers: {
            "Content-Type": "application/json",
        },
        // response
        success: function (res) {
            $(".search-modal").fadeIn().css({ display: "flex" });
            //return async(res.data);
            if (res.recentSearches) {
                $("#api-recent-search").empty();
                var data = res.recentSearches;
                $.each(data, function (key, value) {
                    $("#api-recent-search").append(
                        $(
                            "<li><a href='" +
                                value.url +
                                "'>" +
                                value.title +
                                "</a></li>"
                        )
                    );
                });
            }
            if (res.popularArticles) {
                $("#api-popular-search").empty();
                var data = res.popularArticles;
                $.each(data, function (key, value) {
                    $("#api-popular-search").append(
                        $(
                            "<li><a href='" +
                                value.url +
                                "'>" +
                                value.title +
                                "</a></li>"
                        )
                    );
                });
            }
            if (res.keywordResults) {
                var data = res.keywordResults.filter(function (obj) {
                    var title = obj.title.toLowerCase();
                    var matchTitle = title.includes(str.toLowerCase());
                    if (!matchTitle) {
                        $("#api-keyword-search").html(
                            '<div class="no-results">No Results</div>'
                        );
                    }
                    return matchTitle;
                });

                $.each(data, function (key, value) {
                    $(".no-results").remove();
                    $("#api-keyword-search").append(
                        $(
                            "<li><a href='" +
                                value.url +
                                "'>" +
                                value.title +
                                "</a></li>"
                        )
                    );
                });
            }
        },
    });
}

JSON

{
"recentSearches": [
    {
        "id": "1",
        "title": "coronavirus",
        "url": "http://google.com"
    },
    {
        "id": "2",
        "title": "covid-19",
        "url": "http://google.com"
    },
    {
        "id": "3",
        "title": "keep active",
        "url": "http://google.com"
    },
    {
        "id": "4",
        "title": "get covid advice",
        "url": "http://google.com"
    }
],
"popularArticles": [
    {
        "id": "1",
        "title": "Covid-19 Health Update 25 March 2020",
        "url": "http://google.com"
    },
    {
        "id": "2",
        "title": "Mental Wellbeing Resources about Coronavirus",
        "url": "http://google.com"
    },
    {
        "id": "3",
        "title": "Social Distancing is purely physical",
        "url": "http://google.com"
    },
    {
        "id": "4",
        "title": "What is Physical distancing? (aka `social` distancing)",
        "url": "http://google.com"
    }
],
"keywordResults": [
    {
        "id": "1",
        "title": "Covid-19 Health Update 25 March 2020",
        "url": "http://google.com"
    },
    {
        "id": "2",
        "title": "Mental Wellbeing Resources about Coronavirus",
        "url": "http://google.com"
    },
    {
        "id": "3",
        "title": "Social Distancing is purely physical",
        "url": "http://google.com"
    },
    {
        "id": "4",
        "title": "What is Physical distancing? (aka `social` distancing)",
        "url": "http://google.com"
    }
]
}
...