Question

我有4个输入要搜索。

<div class="col-sm-6 col-md-3 position-relative">
                    <p class="search-type">Hledat podle názvu</p>
                    <input type="text" name="search" id="search" placeholder="" class="form-control mr-sm-2" />
                    <ul class="list-group result"></ul>
                </div>
                <div class="col-sm-6 col-md-3 position-relative">
                    <p class="search-type">Značka</p>
                    <input type="text" name="search" id="search" placeholder="Škoda" class="form-control mr-sm-2" />
                    <ul class="list-group result"></ul>
                </div>
                <div class="col-sm-6 col-md-3 position-relative">
                    <p class="search-type">Model</p>
                    <input type="text" name="search" id="search" placeholder="Octavia III Combi" class="form-control mr-sm-2" />
                    <ul class="list-group result"></ul>
                </div>
                <div class="col-sm-6 col-md-3 position-relative">
                    <p class="search-type">Modifikace</p>
                    <input type="text" name="search" id="search" placeholder="1.6 TDI  (90 HP, 2012 - 11)" class="form-control mr-sm-2" />
                    <ul class="list-group result"></ul>
                </div>

我的搜索JS是：

$(document).ready(function() {
        $.ajaxSetup({
            cache: false
        });
        $('.form-control').keyup(function() {
            $('.result').html('');
            $('#state').val('');
            var searchField = $('.form-control').val();
            var regex = new RegExp(searchField, "i");
            $.getJSON('data.json', function(data) {
                $.each(data, function(key, value) {
                    if (value.name.search(regex) != -1) {
                        $('.result').append('<li class="result-item"><div class="d-flex align-items-center"><div><img src="'+ value.thumbnail +'" height="60" width="60" class="thumbnail" /></div><div class="ml-2"><p class="search-name">'+ value.name + '</p><p class="search-price">' + value.price + ' Kč / <span class="storage in-stock">' + value.onStorage + '</p></div></div></li>');
                    }
                });
            });
        });

    });

在第一个输入中一切正常，但是当我开始在其他输入中搜索时，它什么也没显示。

编辑：咨询后，我将id更改为class。现在，我有一个问题，在搜索时我已经打开了所有结果容器。

JSON搜索更多输入

0 个答案: