0

我有一个突出显示 jquery 脚本，它突出显示您在上面的两个输入中输入的文本中的一个单词....现在我想在 html 标记 (value="something") 中设置第二个输入，它在文档之后立即突出显示的文本是加载中……

我目前的情况在这里：http: //jsfiddle.net/dzorz/bZYqK/

html:

<body>
    <input type="text" class="span1 disabled" id="field1" name="field1">
    <br>
    <input type="text" class="span1 disabled" id="field2" name="field2" value="rhoncus quis porta">
    <br>
    <p>
        Vestibulum rhoncus urna sed urna euismod, ut cursus erüos molestie. 
        Nulla sed ante ut diam gravida auctor eu quis augue. Donec egäet diam 
        malesuada, consectetur orci at, ultrices tellus. Duis id dui vel sem 
        consequat rutrum eget non orci. Nullam sit amet libero odiö. 
        Vestibulum sapien sapien, molestie quis porta nec, sodales nec felis. 
        Mauris vehicula, erat eu consectetur viverra, dui tellus laoreet 
        dolor, quis faucibus turpis eros non mi.
    </p>
</body>

脚本：

$(function () {
    $('#field1').bind('keyup change', function (ev) {
        // pull in the new value
        var searchTerm = $(this).val();

        // remove any old highlighted terms
        $('body').removeHighlight('span.highlight1');

        // disable highlighting if empty
        if (searchTerm) {
            var terms = searchTerm.split(/(\s)/);
            $.each(terms, function (_, term) {
                // highlight the new term
                term = term.trim();
                if (term != "") $('body').highlight(term, 'highlight1');
            });
        }
    });

    $('#field2').bind('keyup change', function (ev) {
        // pull in the new value
        var searchTerm = $(this).val();

        // remove any old highlighted terms
        $('body').removeHighlight(['span.highlight2']);

        // disable highlighting if empty
        if (searchTerm) {
            var terms = searchTerm.split(/\W+/);
            $.each(terms, function (_, term) {
                // highlight the new term
                term = term.trim();
                if (term != "") $('body').highlight(term, 'highlight2');
            });
        }
    });
});


jQuery.fn.highlight = function (pat, className) {
    function innerHighlight(node, pat) {
        var skip = 0;
        if (node.nodeType == 3) {
            var pos = node.data.toUpperCase().indexOf(pat);
            if (pos >= 0) {
                var spannode = document.createElement('span');
                spannode.className = className || 'highlight';
                var middlebit = node.splitText(pos);
                var endbit = middlebit.splitText(pat.length);
                var middleclone = middlebit.cloneNode(true);
                spannode.appendChild(middleclone);
                middlebit.parentNode.replaceChild(spannode, middlebit);
                skip = 1;
            }
        } else if (node.nodeType == 1 && node.childNodes && !/(script|style)/i.test(node.tagName)) {
            for (var i = 0; i < node.childNodes.length; ++i) { i += innerHighlight(node.childNodes[i], pat); }
        }
        return skip;
    }
    return this.each(function () {
        innerHighlight(this, pat.toUpperCase());
    });
};

jQuery.fn.removeHighlight = function (classNames) {
    function newNormalize(node) {
        for (var i = 0, children = node.childNodes, nodeCount = children.length; i <  nodeCount; i++) {
            var child = children[i];
            if (child.nodeType == 1) {
                newNormalize(child);
                continue;
            }
            if (child.nodeType != 3) { continue; }
            var next = child.nextSibling;
            if (next == null || next.nodeType != 3) { continue; }
            var combined_text = child.nodeValue + next.nodeValue;
            new_node = node.ownerDocument.createTextNode(combined_text);
            node.insertBefore(new_node, child);
            node.removeChild(child);
            node.removeChild(next);
            i--;
            nodeCount--;
        }
    }
    var selectors = classNames;
    if(Object.prototype.toString.call(classNames) === '[object Array]') selectors = classNames.join(',');

    return this.find(selectors).each(function () {
        var thisParent = this.parentNode;
        thisParent.replaceChild(this.firstChild, this);
        newNormalize(thisParent);
    }).end();
};

CSS：

.highlight2, .highlight1 {
    background-color: #fff34d;
    -moz-border-radius: 5px;
    /* FF1+ */
    -webkit-border-radius: 5px;
    /* Saf3-4 */
    border-radius: 5px;
    /* Opera 10.5, IE 9, Saf5, Chrome */
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
    /* FF3.5+ */
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
    /* Saf3.0+, Chrome */
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
    /* Opera 10.5+, IE 9.0 */
}
.highlight2, .highlight1 {
    padding:1px 4px;
    margin:0 -4px;
}
.highlight2 {
    background-color: #cecece;
}

是否可以在窗口加载、文档准备好或带有键的东西上设置这些输入？我不确定....请帮助我

你可以更新我的 jsfiddle

4

3 回答 3

2

使用 .triggerHandler() jquery 的方法：

{ 如果是你的 jsfiddle，你必须在调用它之前设置方法，或者在 HEAD 中使用 wrap }

http://jsfiddle.net/bZYqK/2/

.triggerHandler('change')
于 2013-06-10T13:27:17.163 回答
1

我会将您所有的突出显示功能移到它自己的功能中：

function highlightText(searchTerm, removeHighlight, highlight){
        // remove any old highlighted terms
        $('body').removeHighlight(removeHighlight);

        // disable highlighting if empty
        if (searchTerm) {
            var terms = searchTerm.split(/(\s)/);
            $.each(terms, function (_, term) {
                // highlight the new term
                term = term.trim();
                if (term != "") $('body').highlight(term, highlight);
            });

        }
}

然后您可以使用以下内容来触发突出显示并绑定您原来的两个事件：

$(document).ready(function() {
    $('#field1').bind('keyup change', function (ev) {
        highlightText($(this).val(), 'span.highlight1', 'highlight1');
    });

    var field2 = $('#field2');

    field2.bind('keyup change', function (ev) {
        highlightText($(this).val(), 'span.highlight2', 'highlight2');
    });

    highlightText(field2.val(), 'span.highlight2', 'highlight2');
});

例子

于 2013-06-10T13:43:49.803 回答
1

您使用的是足够晚的 jQuery 版本，我会切换到 .on，将重复功能移到它自己的方法中，通过委托分配，然后简单地触发状态“更改”。哦，在您的输入之间添加一个通用类名以进行选择。

我的意思是这样的：

/* Be sure to include plugin BEFORE this script */
//  function to highlight words based on input
function setHighlight(e) {
    // pull in the new value
    var searchTerm = $(this).val();
    // remove any old highlighted terms
    $('body').removeHighlight('span.highlight1');
    // disable highlighting if empty
    if (searchTerm) {
        var terms = searchTerm.split(/(\s)/);
        $.each(terms, function (_, term) {
            // highlight the new term
            term = term.trim();
            if (term != "") {
                //  this will check the id of your inputs for proper highlight class to add to body
                switch ($this.prop("id")) {
                    case "field1":
                        $('body').highlight(term, 'highlight1');
                        break;
                    case "field2":
                        $('body').highlight(term, 'highlight2');
                        break;
                }
            }
        });
    }
}

$(function () {
    // delegate method to keyup and change for all elements having the class ".inp-highlight"
    //      "inp-highlight" is the class name I used in my example (see jsFiddle link)
    $(document).on("keyup change", ".inp-highlight", setHighlight);
    //  with the method asigned and text already in the value of the box, I need only call for change method
    $("#field2").change();
    //  Thanks to jQuery "chaining", you could also insert the text and call change as:
    //  $("#field2").text("Text to search for on load!").change();
});

jsFiddle

完整代码 w 插件 w/o 注释

jQuery.fn.highlight = function (pat, className) {
    function innerHighlight(node, pat) {
        var skip = 0;
        if (node.nodeType == 3) {
            var pos = node.data.toUpperCase().indexOf(pat);
            if (pos >= 0) {
                var spannode = document.createElement('span');
                spannode.className = className || 'highlight';
                var middlebit = node.splitText(pos);
                var endbit = middlebit.splitText(pat.length);
                var middleclone = middlebit.cloneNode(true);
                spannode.appendChild(middleclone);
                middlebit.parentNode.replaceChild(spannode, middlebit);
                skip = 1;
            }
        }
        else if (node.nodeType == 1 && node.childNodes && !/(script|style)/i.test(node.tagName)) {
            for (var i = 0; i < node.childNodes.length; ++i) { i += innerHighlight(node.childNodes[i], pat); }
        }
        return skip;
    }
    return this.each(function () {
        innerHighlight(this, pat.toUpperCase());
    });
};

jQuery.fn.removeHighlight = function (classNames) {
    function newNormalize(node) {
        for (var i = 0, children = node.childNodes, nodeCount = children.length; i <  nodeCount; i++) {
            var child = children[i];
            if (child.nodeType == 1) {
                newNormalize(child);
                continue;
            }
            if (child.nodeType != 3) { continue; }
            var next = child.nextSibling;
            if (next == null || next.nodeType != 3) { continue; }
            var combined_text = child.nodeValue + next.nodeValue;
            new_node = node.ownerDocument.createTextNode(combined_text);
            node.insertBefore(new_node, child);
            node.removeChild(child);
            node.removeChild(next);
            i--;
            nodeCount--;
        }
    }
    var selectors = classNames;
    if(Object.prototype.toString.call(classNames) === '[object Array]') selectors = classNames.join(',');

    return this.find(selectors).each(function () {
        var thisParent = this.parentNode;
        thisParent.replaceChild(this.firstChild, this);
        newNormalize(thisParent);
    }).end();
};

function setHighlight(e) {
    var searchTerm = $(this).val();
    $('body').removeHighlight('span.highlight1');
    if (searchTerm) {
        var terms = searchTerm.split(/(\s)/);
        $.each(terms, function (_, term) {
            // highlight the new term
            term = term.trim();
            if (term != "") {
                switch ($this.prop("id")) {
                    case "field1":
                        $('body').highlight(term, 'highlight1');
                        break;
                    case "field2":
                        $('body').highlight(term, 'highlight2');
                        break;
                }
            }
        });
    }
}

$(function () {
    $(document).on("keyup change", ".inp-highlight", setHighlight);
    $("#field2").change();
});

从评论更新

分裂

有几种方法可以消除空间分裂。选项一就像将“setHighlight”函数更改为以下内容一样简单：

function setHighlight(e) {
    var searchTerm = $(this).val().trim();
    $('body').removeHighlight('span.highlight1');

    if (searchTerm) {
        switch ($this.prop("id")) {
            case "field1":
                $('body').highlight(searchTerm, 'highlight1');
                break;
            case "field2":
                $('body').highlight(searchTerm, 'highlight2');
                break;
        }
    }
}

这将不再检查分割空间。相反，它将始终搜索给出的任何文本。请参阅示例并注意我将预加载值更改为可以在加载时找到的值。

例子

第二种选择可能是一起更改功能。这也意味着更改“分配”方法的方式，因此您需要将输入或其值作为参数传递。然后，这可以允许在给定字符（如空格）上拆分的“选项”；变化将是：

//  change the following line in the load function
//  $(document).on("keyup change", ".inp-highlight", setHighlight);
//  to
$(document).on("keyup change", ".inp-highlight", function(e) { setHighlight($(this)); });
//  given the new method function, if you wanted to split by space, 
//  the call would be
//  setHighlight($(this), " ");

然后将 setHighlight 方法更改为：

function setHighlight($this, splitChar) {
    var searchTerm = $this.val().trim(),
        highlight = function(id, value) {
            switch (id) {
                case "field1":
                    $('body').highlight(value, 'highlight1');
                    break;
                case "field2":
                    $('body').highlight(value, 'highlight2');
                    break;
            }
        };
    $('body').removeHighlight('span.highlight1');
    if (searchTerm != "") {
        if (splitChar) {
            var terms = searchTerm.split(/(\s)/);
            $.each(terms, function (_, term) {
                term = term.trim();
                if (term != "") highlight($this.prop("id"), term);
            });
        }
        else {
            highlight($this.prop("id"), searchTerm);
        }
    }
}

例子

于 2013-06-10T13:37:02.330 回答