Question

我有一个问题，我的突出显示我似乎无法找到解决方案。我有一张桌子和一张桌子。输入框。

在输入框中输入内容时，表格将根据输入框中的内容进行排序。为了澄清搜索内容，我突出显示了与输入值匹配的所有字符（在表格中），如下例所示：

输入：预订t

细胞价值：今天我正在读一本一书他的花园。

这样做的目的是澄清值与之匹配的位置   你的意见。

这很好用，但它有一个问题。从输入字段中删除值时，始终中删除的最后一个字母仍然会突出显示。我的问题是，如果有人能发现我的错误。出于某种原因，当输入框为空时，不会删除html粗体标记。

所以，举一个与前一个相关的例子：

最后删除的字母：B

B的所有细胞都是这样的：

今天我正在花园里读一个 b 。

弗兰克 b 正在推销一本书

我使用以下JQuery＆amp; HTML代码：

HTML：

<table class="table table-responsive table-striped">
    <thead>
        <tr class="tableRow">
            <td colspan="2"><input type="search" class="form-control tableFilter" placeholder="Filter..." /></td>
        <!--<td><input type="search" class="form-control tableFilter" placeholder="Filter..." /></td>-->
    </tr>
    <tr>
        <th>Name</th>
        <th>Definition</th>
        <th>Actions</th>
    </tr>
</thead>
<tbody>
    <!--Defintions-->
    @{
        foreach (UIDefinition definition in Model.DefinitionList)
        {
            <tr class="filterRow">
                <!--Automated Definitions-->
                @if (definition.Target != null)
                {
                    <td class="col-lg-4 hl filter">@Quick.LinkForLinkable(Html, definition.Target)</td>
                    <td class="col-lg-7 hl filter">@definition.Explanation</td>
                    <td class="col-lg-2">

                        <!--Edit-->
                        <a href="#edit-@definition.Id" class="glyphicon glyphicon-edit editCustom-form" data-toggle="modal" data-target="#edit-@definition.Id"></a>

                        <!--Dialog Window-->
                        <div id="edit-@definition.Id" class="modal fade modal-sm editCustom-form" role="dialog">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                                        <h4 class="modal-title">Edit definition</h4>
                                    </div>
                                    <div class="modal-body">
                                        <form action="/Api/@Model.ApiName/@definition.Id" method="PATCH">
                                            <label class="col-lg-12">
                                                Name:
                                                <input class="form-control" type="text" name="Name" placeholder="Name" value="@definition.Term" disabled/>
                                            </label>
                                            <label class="col-lg-12">
                                                Definition:
                                                <input class="form-control" type="text" name="Explanation" placeholder="Definition" value="@definition.Explanation" />
                                            </label>
                                        </form>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-default modal-cancel" data-dismiss="modal">Cancel</button>
                                        <button type="button" class="btn btn-success modal-create addNew" data-dismiss="modal">Confirm</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </td>
                }

JQuery的：

//Table Filter based on input
    $(".tableFilter").keyup(function () {
        var rows = $(".table").find("tbody tr");
        //Filter the jquery object to get results.
        if (this.value.length > 0) {
            //First hide all and remove class used to identify matched rows
            rows.removeClass("match").hide().filter(function () {
                var match = false;
                $(this).find("td.filter").each(function () {
                    var indexOf = $(this).text().toLowerCase().indexOf($(".tableFilter").val().toLowerCase());
                    //Check with indexOf if this row cell include search string
                    if (indexOf !== -1) {
                        match = true;
                        return;
                    }
                });
                return match;
            }).addClass("match").show();
        } else {
            //If filter not provided show all 
            rows.removeClass("match").show().find("b").contents().unwrap
        }

    highlight(this.value);
});

var highlight = function (string) {
    $(".table").find("tbody tr.match td.filter").each(function () {

        if ($(this).text().indexOf(string) === -1)
            return;

        var matchStartIndex = $(this).text().toLowerCase().indexOf(string.toLowerCase());
        var matchEndIndex = matchStartIndex + string.length - 1;

        var beforeMatch = $(this).text().slice(0, matchStartIndex);
        var matchText = $(this).text().slice(matchStartIndex, matchEndIndex + 1);
        var afterMatch = $(this).text().slice(matchEndIndex + 1);

        //Here set selected text to e.g. bold style
        $(this).html(beforeMatch + "<b>" + matchText + "</b>" + afterMatch);
    });
};

Answer 1

您未在此处致电$.fn.unwrap：

rows.removeClass("match").show().find("b").contents().unwrap

所以使用：

修复它

rows.removeClass("match").show().find("b").contents().unwrap();

考虑使用处理更多案例的input事件，例如使用鼠标剪切/粘贴输入内容。

$(".tableFilter").on('input', function () {...});

突出显示问题

1 个答案: