Question

我有一个脚本，可以在keyup上显示搜索结果：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事件的方式设置这些代码。

Answer 1

您应该修改显示搜索结果的代码。

您需要在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>');
        });

到

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/

使类似的文字像Google一样大胆

1 个答案: