javascript - Laravel - 如果为空 AJAX jQuery，则复选框过滤器

Question

我有一个名为decay 的专栏。该列中将有一个过去的日期或 NULL。如果有日期，则表示该物体已离开轨道，或者如果它是 NULL，则该物体仍在轨道上。

我想做的是创建一个复选框，允许我过滤我的数据库以显示在轨道上的物体(列中的 NULL)或已经衰变的物体(日期在列中)。

我已经为我的 Laravel Blade 文件、我的路由和页面 Controller 创建了一个简单的复选框。我只需要有关 Javascript 和 Controller 语句的帮助来过滤它。

Blade :

<span><input type="checkbox" name="in-orbit" value="in-orbit">In Orbit</span>
<span><input type="checkbox" name="decayed" value="decayed">Decayed</span>

Javascript:

$('#decayed').on('change', function() {
  $value = $(this).val();
  $.ajax({
    type: 'get',
    url: '{{$launchsitename->site_code}}',
    data: {
      'search': $value
    },
    success: function(data) {
      $('#launchsatdisplay').html(data);
    }
  });
});

Answer 1

试试这个:

<div>
    <label for="search">Search:</label>
    <input type="text" id="search" name="search"><br>
    <label for="decayed">Decayed:</label>
    <input type="checkbox" id="filter-for-decayed" name="decayed"><br>
    <div id="launchsatdisplay">
        <!-- javascript will put the results here -->
    </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function () {
    var searchTerm = '', // keyup on #search fills this in
        updateData = function () {
            // called after ajax has completed successfully
            var displayData = function (searchData) {
                var $display = $('#launchsatdisplay'),
                    checkbox = document.getElementById ('filter-for-decayed'),
                    dataToDisplay = searchData;

                // if the checkbox is checked then we'll filter for
                // any items that are decayed
                // (decayed == null means the object has NOT decayed)
                if (checkbox.checked) {
                    dataToDisplay = dataToDisplay.filter (function (d) {
                        return d.decayed != null;
                    });
                }

                // clear the display area
                $display.html ('');

                // insert spans that hold the raw data
                // notice that "d" here is each data item
                // you can get fancy with how d is displayed
                dataToDisplay.forEach (function (d, i) {
                    $display.append (`<span>${d}</span>`);
                });
            };

            // now to actually fetch the data from the server
            $.ajax ({
                type: 'GET',
                url: '{{$launchsitename->site_code}}',
                data: { 'search': searchTerm }
            }).success (function (data) {
                displayData (data);
            });
        };

    // called when the checkbox is changed
    $('#filter-for-decayed').on ('change', function () {
        updateData ();
    });

    // called when the search field is typed into
    $('#search').on ('keyup', function () {
        searchTerm = $(this).val();
        updateData ();
    });
});
</script>