首页 > 解决方案 > 如何修复“删除突出显示不是功能”?

问题描述

我指的是这个链接。我想找到页面上所有输入到文本框中的单词并突出显示它。我根据链接进行了操作,但在控制台中出现错误。

未捕获的类型错误:$(...).removeHighlight 不是函数

我在网络选项卡中看到jquery.min.jsjquery.highlight.js加载200状态。以下是我的代码,谢谢

Search: <input type="text" id="text-search" />
<div id="inputText1">
    <p><b>Demo </b> he new edition of KnowlEdge K1  enables your school with flexibility by wholly automating their administrative and academic processes.</p>
    @Html.ActionLink("Form User ", "Index", "User", null, new { @class = "btn btn-primary" }) //button
    @Html.ActionLink("Form Role", "Index", "Role", null, new { @class = "btn btn-primary" }) //button
<div>

javascript:

<script src="~/Scripts/jquery-1.12.4.min.js"></script>
<script src="~/Scripts/jquery.highlight.js"></script>
<script type="text/javascript">
$(function () {
   $('#text-search').bind('keyup change', function (ev) {
      // pull in the new value
      var searchTerm = $(this).val();

      // remove any old highlighted terms
      $('#inputText1').removeHighlight();

      // disable highlighting if empty
      if (searchTerm) {
        // highlight the new term
        $('#inputText1').highlight(searchTerm);
      }
    });
});
</script>

jQuery.highlight.js

jQuery.fn.highlight = function (pat) {
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 = '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 () {
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--;
    }
  }

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

标签: javascriptjqueryrazor

解决方案


推荐阅读