Javascript 搜索栏过滤器，隐藏/显示在页面上

Posted 2023-05-09

【中文标题】Javascript 搜索栏过滤器，隐藏/显示在页面上

【英文标题】：Javascript search bar filter, hide/show on page

【发布时间】：2018-04-23 23:12:58

【问题描述】：

我正在尝试在我的页面上进行主动搜索/过滤。以前有一个使用 angular，但 angular 已被删除，因此我需要使用普通 JS 或 Jquery 进行复制。

我有一个搜索框，没有提交/按钮，只是一个主动搜索。我想根据在搜索中输入的内容过滤页面上的项目。

我的页面是从 JSON 对象加载的，如下面的 JS 所示。这些对象值作为它们的变量从控制器循环（这是在 laravel 中使用刀片和控制器）。

下面的搜索 JS 代码不起作用，因为它依赖于提交，但即使这样它也不会过滤。我只是想隐藏页面上没有匹配值的任何内容。我下面的 html 有一个带有 foreach 循环之一的示例部分，但页面上的所有内容都来自 json 对象。

HTML：

<!--Search bar div-->
<div class="uk-width-5-10">

    <div class="md-input-wrapper search-form">
        <form id="searchProducts">
            <input type="text" class="md-input label-fixed" name="srch-term" id="srch-term" autofocus placeholder="Search Products"/>
            <span class="md-input-bar"></span>

        </form>
    </div>

<!--foreach loops around the wrapper that shows products, for reference-->
@foreach ($orderFormData->pgroups as $pgroup)
 @foreach ($pgroup->image_names as $image_name)
  @foreach ($pgroup->pskus as $psku)

  <tr class="@if (isset($psku->quantity) && $psku->quantity > 0)  highlight  @endif">
                        <td style="font-weight: 500; line-height: 30px; font-size: 14px;"> $psku->frame_fmt </td>
                        <td style="font-weight: 500; line-height: 30px; font-size: 14px;">!! html_entity_decode($psku->frame_desc) !!</td>
                        <td style="font-weight: 500; line-height: 30px; font-size: 14px;"> $psku->cover1_code / $psku->color1_code   $psku->color1_desc </td>
                        <td style="font-weight: 500; line-height: 30px; font-size: 14px;"> $psku->cover2_code / $psku->color2_code   $psku->color2_desc </td>
                        <td>
                            <div class="incrementer">
                              <button class="remove-button md-btn" style="width: 33%; min-width: 0; float: left; height: 30px;"><i class="material-icons">remove</i></button>
                              <input onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57" type="text" class="quantity-input md-input" id="sku- $i " name="count" onClick="this.setSelectionRange(0, this.value.length);" style="width: 33%; min-width: 0; float: left; margin: 0; text-align: center; height: 30px;" value='@if (isset($psku->quantity))  $psku->quantity  @else 0 @endif' />
                              <button class="add-button md-btn md-btn-success" style="width: 33%; min-width: 0; float: left; height: 30px;"><i class="material-icons">add</i></button>
                            </div>
                        </td>
                        <td style="font-weight: 700; line-height: 30px; font-size: 14px;">
                            <span style="text-align: center; display: block; width: 100%;">$ $psku->price </span>
                        </td>
                    </tr>

javascript（不工作）

<script>
var orderFormData = <?php echo json_encode ($tempdata);?>;
</script>
<script>
var orderData = orderFormData // default value
var search = function (e) 
var term = e.currentTarget.value
orderData = Object.entries(orderFormData).reduce(function (data, entry) 
  if (entry[0].match(term) || entry[1].match(term)) 
    data[entry[0]] = entry[1]
  

  return data
, )

console.log(orderData)

document.querySelector('#srch-term').addEventListener('keyup', search)

【问题讨论】：

第 3 行：>/script> 错字

啊，谢谢。修复了，但是，就在这里。它在我的代码中是正确的，但仍然存在问题

【参考方案1】：

下面不能用这个吗？

var ret;
orderData.forEach(function(item, index) 

   if(item!=term) ret.push(item);

);