Question

我正在尝试使用类似于单词搜索的功能构建一个表单。

我有一个文本区域和一系列包含内容的div。当用户键入单词或句子时，与div内容匹配的单词将以黄色突出显示，并且当删除或清空文本区域内容时，也会删除突出显示。

我制作的样本会突出显示单词，但不会完全突出显示。仅突出显示第一个字符。当我尝试搜索新单词时，之前突出显示的单词仍然会突出显示。

HTML

<textarea id="my_ta" name="my_ta"></textarea>
<hr>
    Similiar Words
<hr>
<div>
    This is a serious question   
</div>
<div>
    Does this question ring a bell inside your head?
</div>    
<div>
    This question is a question about questions    
</div>

CSS

.highlight { background-color: yellow }

的JavaScript

$(document).ready(function(){
    $('#my_ta').keypress(function()
    {                                           
        var value = $(this).val();
        if(value)
        {
            $('div').highlight(value); 
        }
        else
        {
          $('.highlight').removeHighlight();
        }
    });        
 });

FIDDLE

Answer 1

查看文档，似乎只有

才能使用

$(document).ready(function(){
    $('#my_ta').on('input',function(){
        $('div').removeHighlight().highlight($(this).val()); 
    });        
});

使用input或keyup代替keypress。 http://jsfiddle.net/2vsgbmgz/3/

Answer 2

而是使用正则表达式。找到你正在寻找的任何东西都比较容易。

HTML

<div>
You can have any text inside a <div>
or any valid html tag you want. 
</div>

CSS

#highlight {
    background-color: red
}

的jQuery

function highlight() {
    $.each($('div'), function() {
        //-------------------------Get Text
        var str = $(this).html();
        //-------------------------Wrap Matching Text
        str = str.replace(/hi/ig, '<span id="highlight">$&</span>');
        //-------------------------Insert Coloured Text
        $(this).html(str);
    });
}
highlight();

jsFiddle

JQuery突出显示无法正常工作

2 个答案:

HTML

CSS

的jQuery