jquery简单的搜索建议文本突出显示

我想基于类型文本的输入和突出显示文本做一个简单的jQuery单词搜索。我怎样才能做到这一点多个词？此代码仅适用于单个字符。jquery简单的搜索建议文本突出显示

的Html

<input type="text"/> 

<div>John Resig 
    George Martin 
    Malcom John Sinclair 
    J. Ohn 
    Sample text 
</div>

CSS

span {  
    background : red 
}

$("input").keyup(function() { 
    var mysearchword = $("input:text").val();  
    var word = mysearchword; 
    $("div:contains('"+word+"')").html(function(i,html) { 
     var re = new RegExp(word,"g"); 
     return html.replace(re,'<span>'+word+'</span>') 
    }); 
});

JsFiddle

来源

2015-06-30 Anoops

这个答案对你有帮助吗？http：//stackoverflow.com/questions/8644428/how-to-highlight-text-using-javascript – Tony

本教程也看起来很有帮助：http：//www.the -art-of-web.com/javascript/search-highlight/ – Tony

尝试阅读此：http://stackoverflow.com/questions/7571117/jquery-something-like-contains-but-to-match-exactly-phrase – Teo

如果你有一组预定义的元素为目标，然后

var $para = $('.para') 
 
$("input").keyup(function() { 
 
    $para.find('span.highlight').contents().unwrap(); 
 
    var mysearchword = this.value.trim(); 
 
    if (mysearchword) { 
 
    var re = new RegExp('(' + mysearchword.trim().split(/\s+/).join('|') + ')', "gi"); 
 
    $para.html(function(i, html) { 
 
     return html.replace(re, '<span class="highlight">$1</span>') 
 
    }); 
 
    } 
 
});

span.highlight { 
 
    background: red 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<input type="text" /> 
 
<div class="para">John Resig George Martin Malcom John Sinclair J. Ohn Sample text</div>

来源

2015-06-30 09:03:35

谢谢Arun。这工作正常。但标记显示Iam删除输入文本时我输入的内容。 – Anoops

@ user3927335你可以举个例子来重新创建问题 - http://jsfiddle.net/arunpjohny/hnvzrcb3/3/ –

更好地简单地使用'var mysearchword = this.value;'而不是'var mysearchword = $（“ input：text“）.val（）;'也可以从其他'input'元素中选择值。 –

我修改了一下你的代码，并能够实现你所需要的。但我不确定。

的Html

<input type="text" id="inputText" /> 
<div id="sampleText"> 
    John Resig George Martin Malcom John Sinclair J. Ohn Sample text 
</div>

$("input").keyup(function() { 

    var mysearchword = $(this).val(); 
    var word = mysearchword; 
    var textInDiv = $("#sampleText").text(); 
    if (textInDiv.indexOf(word) > 0) { 
     var re = new RegExp(word, "g"); 
     $("#sampleText").html(textInDiv.replace(re, '<span>' + word +'</span>')); 
    }; 
});

来源

2015-06-30 09:00:49

jquery简单的搜索建议文本突出显示

回答

相关问题