Question

我有两个本质上是分层的列表：

    <div class="available-list">
    <div class="trigger-row-heading semi-bold grey13-txt" data-parent="0" data-id="1">
Web
<div class="trigger-row-heading semi-bold grey11-txt" data-parent="1" data-id="4">
    Lead Grid
    <div class="trigger-item grey9-txt" data-parent="4" data-id="12">
        <div class="location-name">
            Edit
        </div>
    </div>
    <div class="trigger-item grey9-txt" data-parent="4" data-id="13">
        <div class="location-name">
            Edit +
        </div>
    </div>
</div>
<div class="trigger-row-heading semi-bold grey11-txt" data-parent="1" data-id="6">
    Activity Grid
    <div class="trigger-item grey9-txt" data-parent="6" data-id="15">
        <div class="location-name">
            Edit
        </div>
    </div>
</div>

<div class="selected-list">
<div class="trigger-row-heading semi-bold grey13-txt" data-parent="0" data-id="1">
Web
<div class="trigger-row-heading semi-bold grey11-txt" data-parent="1" data-id="3">
    Lead Management
    <div class="trigger-item grey9-txt" data-parent="3" data-id="11">
        <div class="location-name">
            Add New Lead
        </div>
    </div>
    <div class="trigger-item grey9-txt" data-parent="3" data-id="10">
        <div class="location-name">
            Add New Lead +
        </div>
    </div>
    <div class="trigger-item grey9-txt" data-parent="3" data-id="9">
        <div class="location-name">
            Quick Add Lead
        </div>
    </div>
</div>
<div class="trigger-row-heading semi-bold grey11-txt" data-parent="1" data-id="5">
    Activity Management
    <div class="trigger-item grey9-txt" data-parent="5" data-id="14">
        <div class="location-name">
            Add Revenue Activity
        </div>
    </div>
</div>

单击“ .trigger-item”将其连同其层次结构一起发送到另一个列表。

我的目标：搜索任一列表应显示任何匹配的元素，并将其显示在同一容器中。

我的障碍：清除搜索文字应显示原始列表，减去搜索后我发送到其他列表的任何元素。

到目前为止，这是我的Javascript代码。我可以搜索元素并将它们发送到其他列表，但是在清除搜索文本时我无法检索其余元素。

this.searchAvailableList = function (searchText, container) {
    debugger;
    var searchResults = '';
    if (!this.savedSearchLocations)
        this.savedSearchLocations = $(".trigger-item", container); //save original elements on searching.
    if (searchText.length > 0)
        searchResults = $($('.trigger-item:contains(' + searchText + ')'), this.savedSearchLocations);
    container.html('');
    if(searchResults.length>0)
        for(var i=0; i<searchResults.length; i++)
        {
            //show searchresults in container
            this.appendParentToTarget(container, $(searchResults[i]));
        }
    else
    {
        if(searchText.length>0)
        {
            this.availableAreasDiv.html("No Results Found");
        }
        for (var i = 0; i < this.savedSearchLocations.length; i++) {
            //show original List Items if Searched Value is empty.
            this.appendParentToTarget(container, $(this.savedSearchLocations[i]));
        }
    }
};

在两个HTML容器中搜索

0 个答案: