Question

I have a script which allows to display search results on keyup: JsFiddle

I want to mimic Google by adding a bold effect on the text in results if it matches the value of input. I have a code in which I generate ‘tags’ like this:

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

if (e.keyCode == 32) {

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

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

  } 

This means if I press the space bar a tag will be generated, which I have given a red color for contrast. Just type something in the searchbox and hit space bar to see the tags. So second Im trying to give a bold font-weight to the matching words in the results, I tried:

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

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

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

This doesn’t work. I have set these codes in the keyup event way down in the example script.

Answer 1

You should modify the code where you display the search results.

You need to search inside the Description property for the search terms and wrap them in the element you want..

---

UPDATE

You just need to modify the regular expression, used to search, a bit to include multiple terms..

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

Working example at http://jsfiddle.net/gaby/CGN8e/7/

---

ORIGINAL CODE

So change

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

Working example at http://jsfiddle.net/gaby/CGN8e/5/