Сделайте похожий текст жирным, как Google - PullRequest
Новая
       22

Сделайте похожий текст жирным, как Google

1 голос
/ 24 марта 2012

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

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

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

if (e.keyCode == 32) {

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

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

  }

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

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

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

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

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

1 Ответ

1 голос
/ 24 марта 2012

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

Вам необходимо выполнить поиск в свойстве 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/

...