Сделать аналогичный текст жирным шрифтом, как Google

Question

У меня есть скрипт, который позволяет отображать результаты поиска по KeyUp: JsFiddle

Я хочу, чтобы имитировать Google, добавив жирный эффект на текст в результатах, если он соответствует значению входного сигнала. У меня есть код, в котором я генерировать «метки», как это:

var tag = $('#searchbox').val(); 

if (e.keyCode == 32) { 

var div = $('<div class="tags" />'); 

    div.append(tag); 
    $(document.body).append(div); 

    } 

Это означает, что, если нажать на клавишу пробела тег будет создан, который я дал красный цвет для контраста. Просто введите что-то в поле поиска и нажмите пробел, чтобы увидеть теги. Поэтому второй Im пытается дать смелое начертание шрифта для согласующих слов в результатах, я попробовал:

if($('#searchbox').val() === $('.tags').text()){ 

var makeBold = $('.tags').text(); 

$('#txtresults').addClass(makeBold); 
} 

Это не работает. Я установил эти коды в событии keyup в сценарии примера.

Answer 1

Вы должны изменить код, в котором отображаются результаты поиска.

Вам нужно искать внутри Description имущества для поисковых терминов и завернуть их в элемент, который вы хотите ..

---

UPDATE

Вам просто нужно изменить регулярное выражение, используемое искать, немного включать несколько терминов ..

var searchRegex = new RegExp(response.SearchResponse.Query.SearchTerms.replace(/\s+/gi,' ').split(' ').join('|'),'gi'); 

Рабочий пример наhttp://jsfiddle.net/gaby/CGN8e/7/

---

ОРИГИНАЛ КОД

Меняем

$.each(searchResults, function(i, searchResult) { 
    if (searchResult.Description == null) { 
     searchResult.Description = ''; 
    } 

    webResultOutput.push('<li>', 
         '<h3><a href="', searchResult.Url, '">', searchResult.Title, '</a></h3>', 
         '<p class="desc">', 
         searchResult.Description, 
         '</p>', 
         '<p class="url">', searchResult.DisplayUrl, '</p>', 
         '</li>'); 
     }); 

в

var searchRegex = new RegExp(response.SearchResponse.Query.SearchTerms,'gi'); 
$.each(searchResults, function(i, searchResult) { 
    if (searchResult.Description == null) { 
     searchResult.Description = ''; 
    } 

    webResultOutput.push('<li>', 
         '<h3><a href="', searchResult.Url, '">', searchResult.Title, '</a></h3>', 
         '<p class="desc">', 
         searchResult.Description.replace(searchRegex , function(match){ return '<b>'+match+'</b>'}), 
         '</p>', 
         '<p class="url">', searchResult.DisplayUrl, '</p>', 
         '</li>'); 
     }); 

Работа в примерhttp://jsfiddle.net/gaby/CGN8e/5/