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簡單的搜索建議文本突出顯示

回答

相關問題