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

У меня есть скрипт, который позволяет отображать результаты поиска по клавише: 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 вниз в примере сценария.


events jquery addclass
person Youss    schedule 24.03.2012    source источник
comment
Я предлагаю вам сначала очистить теги, а затем добавить введенные теги, потому что, когда вы вводите тег и нажимаете пробел, затем назад и снова пробел, теги дублируются.   -  person Cobold    schedule 24.03.2012
comment
@Cobold Должно ли это иметь значение, если я просто хочу выделить соответствующий текст жирным шрифтом? Я не вижу проблемы в дублированном тексте, если соответствующий текст выделяется жирным шрифтом.   -  person Youss    schedule 24.03.2012
comment
Я просто подумал, что это будет выглядеть довольно грязно, когда кто-то неправильно введет теги, а затем отредактирует их, и неправильные теги все еще будут там. Это просто предложение.   -  person Cobold    schedule 24.03.2012
comment
@Cobold Спасибо, но теги не будут видны, и я в конечном итоге очистлю HTML (''), если значение ('')   -  person Youss    schedule 24.03.2012

Ответы (1)


arrow_upward
1
arrow_downward

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

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

ОБНОВЛЕНИЕ

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

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>');
        });

to

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/

person Gabriele Petrioli    schedule 24.03.2012
comment
Привет, я думаю, что это здорово, и это определенно поможет мне так или иначе. Но главная причина, по которой я создал эти теги, — пробел и несколько слов. Ваш код выделяет только первый запрос, после нажатия пробела ничего не выделяется. Вот почему я действительно хотел бы использовать ВСЕ слова в тегах для каждого запроса. Таким образом, «мне нравится стек» будет выделено «мне нравится стек». Я надеюсь, что вы (все еще) заинтересованы в этом вызове.. - person Youss; 24.03.2012
comment
@Youss, все слова в последнем поисковом запросе. правильно ? не предыдущие запросы, а также. - person Gabriele Petrioli; 24.03.2012
comment
Основная проблема заключается в том, что если вы наберете 'I like stack', будет выделено точное предложение. Но мне бы очень хотелось, чтобы он выделял 'Í', выделял 'like' и выделял 'stack', как это делает Google. В противном случае сложное предложение нигде не будет выделено. - person Youss; 24.03.2012
comment
Вот почему я сделал теги, потому что они «разбивают» слова пробелом. - person Youss; 24.03.2012
comment
@Youss, хорошо понял .. проверьте обновленный ответ и поиграйте .. (наверху ответа) - person Gabriele Petrioli; 24.03.2012
comment
@ Большое вам спасибо :) (Как вы думаете, можно ли отличить по пробелу, чтобы при вводе A и пробела в результатах выделялось A вместо каждой буквы A...) - person Youss; 24.03.2012
comment
@Youss, не уверен, что понимаю ... давайте предположим, что _ нажат пробел. Если я ищу a_test, что он должен выделить? а что, если я наберу a_test_. - person Gabriele Petrioli; 24.03.2012
comment
@ Габи, также известная как Г. Петриоли. Если вы наберете a_test, вам придется выделить a и test, но не все a в результатах. Таким образом, если бы результаты были примерно такими: Я в стеке, он не выделял бы a в стеке слов. и стек, я надеюсь, что это имеет смысл, в любом случае, я рад, что вы остаетесь :) - person Youss; 24.03.2012
comment
так выделять только полные слова? (в вашем первом примере Im at stack ничего не будет выделено?) - person Gabriele Petrioli; 24.03.2012
comment
Если вы нажмете одну букву А (пробел), будет выделена каждая буква А в каждом слове, что неверно. Я хочу, чтобы он выделял A только в том случае, если он сам по себе. Потому что это то, что печатается.. - person Youss; 24.03.2012
comment
Просто взгляните на Google. Когда вы вводите одну букву, только соответствующая буква, которая стоит сама по себе, получает полужирный шрифт css. Но в вашем коде выделена каждая буква в каждом слове или предложении. Надеюсь, я понимаю. - person Youss; 24.03.2012
comment
Хорошо, проверьте jsfiddle.net/gaby/CGN8e/9 Соответствует границам слов (< i>только целые слова). Внесены некоторые небольшие изменения, чтобы за один раз выполнялся только один вызов ajax. - person Gabriele Petrioli; 24.03.2012
comment
@Youss кстати .. используйте jsfiddle.net/gaby/CGN8e/12 У меня была ошибка в регулярном выражении.. я должен использовать \s для сопоставления пробелов, а не \W, как я сделал.. - person Gabriele Petrioli; 24.03.2012
comment
@ Габи, она же Г. Петриоли. Спасибо за терпение, спасибо за ваши усилия и время, а также за решение моей проблемы :) - person Youss; 24.03.2012