6

尊敬的会员，

我在一个模板的帮助下用纯 HTML 设计网站。

在那我有一个文本框[搜索] 和 Go 按钮。

我想做这样的操作，当任何人输入某些文本并按下“Go”按钮时，它应该突出显示该网站中与该文本匹配的文本。

我怎样才能做到这一点？

比你。

4

3 回答 3

11 
$(document).ready(function(){
        $('#searchItem').keyup(function(){
            var name = $(this).val();
            var pattern = name.toLowerCase(); 
            var targetId = ""; 
            var divs = document.getElementsByClassName("item"); 

            $(document).find('.item').hide();

            $('.item').each(function(i){
                var para = divs[i].getElementsByTagName("p"); 
                var index = para[0].innerText.toLowerCase().indexOf(pattern); 
                if (index != -1) { 
                    $(this).show();
                }
            });
        }); 
    });
于 2012-12-10T10:40:10.367 回答
5

你没有发布你拥有的东西。我想这就是你所说的。

检查这个。我可以为你做到这一点，但你必须在你的想法中做到这一点

function highlightInElement(elementId, text){
var elementHtml = document.getElementById(elementId).innerHTML;
var tags = [];
var tagLocations= [];
var htmlTagRegEx = /<{1}\/{0,1}\w+>{1}/;

//Strip the tags from the elementHtml and keep track of them
var htmlTag;
while(htmlTag = elementHtml.match(htmlTagRegEx)){
    tagLocations[tagLocations.length] = elementHtml.search(htmlTagRegEx);
    tags[tags.length] = htmlTag;
    elementHtml = elementHtml.replace(htmlTag, '');
}

//Search for the text in the stripped html
var textLocation = elementHtml.search(text);
if(textLocation){
    //Add the highlight
    var highlightHTMLStart = '<span class="highlight">';
    var highlightHTMLEnd = '</span>';
    elementHtml = elementHtml.replace(text, highlightHTMLStart + text + highlightHTMLEnd);

    //plug back in the HTML tags
    var textEndLocation = textLocation + text.length;
    for(i=tagLocations.length-1; i>=0; i--){
        var location = tagLocations[i];
        if(location > textEndLocation){
            location += highlightHTMLStart.length + highlightHTMLEnd.length;
        } else if(location > textLocation){
            location += highlightHTMLStart.length;
        }
        elementHtml = elementHtml.substring(0,location) + tags[i] + elementHtml.substring(location);
    }
}

//Update the html of the element
document.getElementById(elementId).innerHTML = elementHtml;
}

highlightInElement("fatDoggie","The dog is really really fat");

这个小提琴是为了突出显示一组文本，而不是你应该在搜索中获取变量并将其放在highlightInElement("Element","Var");

于 2012-12-10T10:44:28.320 回答
1

你的意思是你有一个单页的网站？在这种情况下，整个内容已经加载到页面上，您只想搜索它。您可以使用 Javascript 和 JQuery 轻松完成。只需单击按钮，然后遍历 DOM 以查找您的字符串，然后对其执行操作（例如，滚动到那里，或突出显示它）。

如果您有多个页面，那么这将更具挑战性，因为您没有所有内容都可以在客户端使用。在这种情况下，服务器端搜索解决方案会更好。

于 2012-12-10T10:40:45.463 回答