Question

嘿所有我正在使用名为jSearch的jQuery插件，我有以下代码，目前允许我在所述类名中搜索某些标签：

var jSearch = (function () {
   var input = $('#searchTxtBox');
   var items = $('#inventory .select3-multiple-selected-item');

   input.keyup(function () {
       var input = $(this).val();

       switch (true) {
           case input === '':
              items.css('opacity', '1');
              break;
           default:
              items.css('opacity', '0.2');
              items.filter('[data-searchBox*="' + input.toLowerCase() + '"]').css('opacity', '1');
              break;
       }
   });
}());

以及一些HTML：

<div class="cssMadeTbl-cell">
    <label class="control-label" data-base="NEW_Project" data-definedas="text" data-required="True" for="inventory"></label>
    <div style="float: right;">
        <input class="tips" data-tooltip="example 1" id="searchTxtBox" name="searchTxtBox" placeholder="Search..." type="search" value=" ">
    </div>
    <div class="input-group">
        <span data-db="bomStatus" class="bomClass" data-id="The Status">The Status</span>
        <span id="lblBG"></span>
        <div class="input-group-addon" style="width: 33px;">
            <img src="data:image/svg+xml;base64,+DQo8L2c+DQo8L2c+DQo8L2c+Qo8L2c+DQo8L2c+DQo8L3N2Zz4NCg==" id="iconImg_currentUsers" style="width: 20px; height:20px;">
        </div>
        <div class="col-sm-10">
            <span id="inventory" class="tips form-control input-sm" data_tooltip="example 1" data-cnt="0">
                <div class="select3-multiple-input-container">
                    <span class="select3-multiple-selected-item" data-item-id="1" data-searchbox="pending">Pending</span>
                    <span class="select3-multiple-selected-item" data-item-id="2" data-searchbox="approved">Approved</span>
                    <span class="select3-multiple-selected-item" data-item-id="3" data-searchbox="denied">Denied</span>
                    <span class="select3-multiple-selected-item" data-item-id="ADDtab_100954500" data-searchbox="add item">ADD ITEM</span>
                    <input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="select3-multiple-input" placeholder="">
                    <span class="select3-multiple-input select3-width-detector"></span>
                    <div class="clearfix"></div>
                </div>
            </span>
        </div>
    </div>
</div>

这适用于上述区域。但问题是，在同一页面上，我还有更多 InventoryXX ID，我也需要添加搜索框。这些范围从广告资源到广告资源18 。

我知道我可以这样做：

var jSearch1 = (function () {
var input = $('#searchTxtBox');
var items = $('#inventory .select3-multiple-selected-item');
[more code here....]

var jSearch2 = (function () {
var input = $('#searchTxtBox');
var items = $('#inventory1 .select3-multiple-selected-item');
[more code here....]

var jSearch3 = (function () {
var input = $('#searchTxtBox');
var items = $('#inventory2 .select3-multiple-selected-item');
[more code here....]
[etc etc...]

但那看起来很麻烦......

如何修改此jQuery脚本以容纳所有广告资源 ID，但仍然彼此分开？

Answer 1

尝试省略#inventory：

var items = $('.select3-multiple-selected-item');

如果您只需要定位#inventory*，请

或以这种方式修改选择器：

var items = $('[id^="inventory"] .select3-multiple-selected-item');

jQuery搜索插件（jSearch）搜索多个区域

1 个答案: