0

基本上，我在这里结合了 2 个 jQuery 插件：SearchHighlight 和 TotalStorage（将值存储到一个易于检索的 cookie 中）。

因此，在将关键字输入谷歌搜索框后，会显示谷歌结果，并且访问者点击选择的链接。他进入页面，他用于搜索的关键字被赋予黄色背景。但是，这对我的客户来说还不够好 - 他要求我这样做，以便将访问者直接带到关键字的位置。

name="e"我认为让 jQuery在第一次出现关键字之前以某种方式预先添加 html 锚标记 ( ) 就足够了。

这里的另一个问题是：搜索短语可以（并且通常会）包含多个单词。如果我选择使用第一个单词，当找不到该特定单词（其他单词）时该怎么办？

因此，最好的方法是将字符串分成单独的单词，测试它们是否出现在页面上，并将锚点添加到第一次出现的位置。

我不是一个真正精通 JavaScript/jQuery 的人，所以任何帮助都将不胜感激。

以下是脚本：

// when the form is submitted, search phrase is written to a "kw" cookie
$(document).ready(function() {

    $("#submit").click(function() {
        var keywords = $("input[name=query]").val();
        $.totalStorage('kw', keywords);
    });
});​

在页脚中：

jQuery(function() {
    var options = {
        exact: "whole",
        style_name_suffix: false,
        keys: $.totalStorage('kw') // keys determine what strings are to be highlighted
    }

    jQuery(document).SearchHighlight(options);


    // I suppose here the value of KW cookie could be broken into words
    // and searching for occurrences could be put
    // along with the code for prepending occurrences with an anchor tag

    // reset KW cookie to empty value
    $.totalStorage('kw', '');
});​
4

1 回答 1

0

这是一个应该有所帮助的基本起点。目前还不完全清楚完整的目标是什么。单词基于您的 Lorum Ipsum 演示。您还需要修改 html 输出结构。我将文字包裹在标签中，这样可以直观地看到效果。

还应注意，如果单词与 html 标记的任何部分匹配，则此代码将弄乱 html。正则表达式需要改进以解释 htis

/* would take this array from your storage plugin*/
var keywords = ['content', 'phrase', 'affordable','another'];
keywords.sort();
var words=[];
/* make new array that includes first letter caps for begiining sentences*/
for ( i=0;i<keywords.length;i++){
    words.push( keywords[i], upperCaseKeyword(keywords[i]));
}
/* get html from content element and store in variable*/
var html = $('.wrapper').html();

for (i = 0; i < words.length; i++) {
    var word=words[i];    
    var reg = new RegExp(words[i], 'g');
    html = html.replace(reg, '<a name="'+word+'" class="tag">' + word + '</a>');   

}

/* replace old html with modified*/

$('.wrapper').html(html);

/* helper function*/
function upperCaseKeyword(word) {
    var firstLetter = word.substr(0, 1).toUpperCase();
    return firstLetter + word.slice(1);
}

演示：http: //jsfiddle.net/GxvxJ/1/

于 2012-10-14T17:02:16.753 回答