我有两个本质上是分层的列表:
<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]));
}
}
};