Привет! Я хочу реализовать подсветку текста в заголовке. Просто интересно, как бы я это сделал с моим текущим кодом - учитывая, что мои результаты отображаются в другом 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"
}
]
}