如何根据搜索框过滤引导卡

时间:2019-04-04 17:12:45

标签: javascript jquery bootstrap-4 laravel-5.8

我使用Laravel 5.8创建了一个应用程序。在继续阅读之前,请向下滚动以查看图像,这将有助于我解释问题。

搜索框用于在<H5>标签内查找匹配的文本,然后隐藏任何recipe-card ID div。

有两个问题:

  1. 搜索时div不会折叠。
  2. 某些元素(例如带有哈希标签的卡页脚)也会被删除。这不是故意的。

我希望有人可以帮助我完成我需要使用的JavaScript。

  • 搜索标题(H5标签)
  • 隐藏没有搜索条件的所有食谱卡。
  

Laravel view.blade.php显示我的食谱卡

<div class="container">
<div class="row pb-4">
    <div class="col-12">
        <input type="text" name="searchbox" id="searchbox" class="filterinput form-control" placeholder="Search recipe titles and tags...">
    </div>
</div>

<div class="row">
    @foreach ($recipes as $recipe)
    <div class="col-lg-4 pb-4" id="recipe-card">
        <div class="card h-100">
            <a href="/recipes/{{ $recipe->id}}"><img class="card-img-top " src="{{ $recipe->imgurl}}" alt="{{ $recipe->name }}"></a>
            <div class="card-body">
                <h5 class="card-title"><a href="/recipes/{{ $recipe->id}}"> {{ $recipe->name }} </a> {{ $recipe->favourite == 'Yes' ? ' Fav' : '' }} </h5>
                <p class="card-text">
                    <span id="">Time:{{ $recipe->totaltime }}</span>
                </p>
                <p class="card-text">
                    <span id="">Type:{{ $recipe->mealtype }}</span>
                </p>
            </div>
            <div class="card-footer text-muted text-truncate">
                <span class="badge badge-secondary">{{ $recipe->tags }}</span>
            </div>
        </div>
    </div>

    @endforeach

</div>

  

这是我当前用于过滤的JavaScript:

<script>
$(document).ready(function() {
    $("#searchbox").on("keyup", function() {
        var value = $(this).val().toLowerCase();
        $("#recipe-card div").filter(function() {
            $(this).toggle($(this).find('h5').text().toLowerCase().indexOf(value) > -1)
        });
    });
});
</script>

上面的代码产生了这个:

  

使用搜索之前

enter image description here

  

搜索标题(H5标签)为“碗”的食谱

enter image description here

2 个答案:

答案 0 :(得分:1)

您的选择器#recipe-card div实际上并未执行您想要的操作。而不是抓取卡片中的第一个div,而是抓取卡片中的所有 div。

此外,您应该避免对多个卡重复使用相同的ID,而应使用数据角色之类的方法。 ID应该是唯一的,因此拥有多个相同的ID通常是不好的做法。

如果您改用data-role="recipe"之类的东西,则可以使用以下选择器:

$('div[data-role="recipe"] div:first)

或者,只需在内部div上放置一个数据角色,然后简单地专门选择该元素即可。

这可能无法解决您的所有问题,但请从此开始,让我知道是否还有任何问题。

OP附加了以下JS解决方案,并将其标记为正确答案:

<script>
$(document).ready(function() {
    $("#searchbox").on("keyup", function() {
        var value = $(this).val().toLowerCase();
        $('div[data-role="recipe"]').filter(function() {
            $(this).toggle($(this).find('h5').text().toLowerCase().indexOf(value) > -1)
        });
    });
});
</script>

答案 1 :(得分:1)

这些列不应该都具有相同的ID。另外,jQuery代码应该隐藏列(col-lg-4),而不是卡片。可以使用jQuery处理很多不同的方式...

private readonly MyConfig conf;

//Constructor
public AnnouncementService(MyConfig config) {
    this.conf = config;
}

private async Task<string> SaveAnnouncement(IFormFile file = null, string base64 = null) {
    string path = conf.FolderAnnouncement;
    string imageUrl = Guid.NewGuid().ToString();
    var mediaPath = conf.BaseMediaUrl;
    string extension = Path.GetExtension(file.FileName);
    var imagePath = mediaPath + path + imageUrl+extension;
    if (!string.IsNullOrEmpty(base64)) {
        byte[] bytes = Convert.FromBase64String(base64);
        File.WriteAllBytes(imagePath, bytes);  
    } else {
        using (var fileStream = new FileStream(imagePath, FileMode.Create)) {
            await file.CopyToAsync(fileStream);
        }
    }
    return  imageUrl+extension;
}

演示:https://www.codeply.com/go/IWKdFu4xIJ