jQuery 中通过搜索查询过滤的呈现列表项的问题

Question

我正在制作一个酒店网站作为一个爱好项目，但是在尝试根据酒店位置的搜索查询呈现列表项时。

最初，我正在渲染存储在数组中的所有酒店，但是当我按位置搜索时，假设我输入“斯德哥尔摩”，然后我想显示位于斯德哥尔摩的酒店的所有列表项。

现在，我只能在键入与项目匹配的位置时隐藏所有列表项目。

这是我的代码：

HTML：

<html>
<title>Kevs Hotel</title>
<link rel="stylesheet" type="text/css" href="Style/KevinsHotel.css">

<body>
    <div class="header">
        <h1>Kevs Hotel</h1>
        <input type="search" id="locationSearch" name="location" placeholder="Location" onkeyup="searchBarFeatures()">
        <input type="date" class="checkInTime" name="checkInDate" placeholder="Check in" required>
        <input type="date" class="checkOutTime" name="checkOutDate" placeholder="Check out">
        <input type="number" class="noOfGuests" name="NoOfGuests" placeholder="Guests">
        <input type="submit" class="submitBtn" value="Search">
    </div>

    <ul id="hotelList">
        <!-- <li id="hotelCard">
            <h3 class="hotelName"></h3>
            <p class="hotelLocation"></p>
            <dfn class="hotelDescription"></dfn> 
            <b class="priceOfStay"></b><br>
            <button onclick="openSelectedHotelModal()" class="selectHotelBtn">Select this hotel</button>
        </li> -->
    </ul>
    
        <div id="hotelModal" class="selectedHotelModal">
            <!-- <div id="modal-content">
                <span class="closeModalBtn" onclick="closeSelectedModal()">&#8864;</span>
                <h3 class="selectedHotelName"><b></b></h3>
                <p class="selectedHotelLocation"></p>
                <dfn class="selectedHotelDescription">The best hotel in Gothenburg. Its gör best</dfn> 
                <b class="selectedPriceOfStay">800 SEK</b><br>
            </div> -->
        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="Script/KevinsHotel.js"></script>
</body>

JavaScript/jQuery：

var hotels = [
    {hotelName: 'Scandic Crown', location: 'Gothenburg', description: 'The best hotel in Gothenburg. Its gör best', price: 800},
    {hotelName: 'Scandic Alvik', location: 'Stockholm', description: 'Stockholms finest hotel', price: 1200},
    {hotelName: 'Scandic Triangeln', location: 'Malmö', description: 'One of the finest in Malmö, and with an amazing view of Malmö.', price: 1000},
    {hotelName: 'City Hotel Avenyn', location: 'Gothenburg', description: 'Great and cosy hotel in middle of Gothenburg', price: 750},
    {hotelName: 'Ice Hotel', location: 'Kiruna', description: 'The hotel that exists in the winter and looks like an igloo', price: 1250},
    {hotelName: 'Gålö Camping', location: 'Haninge', description: 'A great excursion in Stockholm', price: 995}
];

var hotelListItem = document.getElementById('hotelCard');
var selectedHotelModal = document.getElementById("hotelModal"); //Get Modal

var searchInput = document.getElementById("locationSearch");

function searchBarFeatures(){
    console.log(searchInput.value);
    var locOccurence = hotels.filter((hot) => hot.location.toUpperCase() === searchInput.value.toUpperCase());

    console.log("There are " + locOccurence.length + " hotels in " + searchInput.value);

    for (let i = 0; i < hotels.length; i++) {
        const hotel = hotels[i];

        const hotelCard = ('<li id="hotelCard"><h3 class="hotelName">'
                            + hotel.hotelName + '</h3>' + 
                            '<p class="hotelLocation">' + hotel.location + 
                            '</p><dfn class="hotelDescription">'+ hotel.description +
                            ' <br></dfn><b class="priceOfStay">'+ hotel.price +'</b><br>' + 
                            '<button onclick="openSelectedHotelModal()" class="selectHotelBtn">Select this hotel</button></li>');
        
        if(searchInput.value.toUpperCase() === hotel.location.toUpperCase()){
            console.log("The Location search input seems to match the hotel Location ;) ");
            $(document).ready(function(){
                var hotelList = $("#hotelList");
                var hotCard = $("#hotelCard");
                    $(hotelList).hide(1000);
                    $(hotCard).filter('#hotelCard:nth-child(2) === ' + !searchInput.value + ' ').show(1000);
            });
        }
    }
    
}

function hotelList() {
    console.log(hotels.length);
    console.log(searchInput.value);

    for (let i = 0; i < hotels.length; i++) {
        const hotel = hotels[i];

        const hotelCard = ('<li id="hotelCard"><h3 class="hotelName">'
                            + hotel.hotelName + '</h3>' + 
                            '<p class="hotelLocation">' + hotel.location + 
                            '</p><dfn class="hotelDescription">'+ hotel.description +
                            ' <br></dfn><b class="priceOfStay">'+ hotel.price +'</b><br>' + 
                            '<button onclick="openSelectedHotelModal()" class="selectHotelBtn">Select this hotel</button></li>');

        $(document).ready(function(){
            var hotelList = $("#hotelList");
            hotelList.append(hotelCard);
        });
    }
}
window.onload = hotelList;

我真的很想显示我在搜索栏中输入的酒店，例如，如果我输入斯德哥尔摩，我想呈现所有酒店在斯德哥尔摩的位置。

感谢所有帮助。 先感谢您

Answer 1

您可以遍历类，即： .hotelLocation其中位置在那里。然后，使用$(this).text()将其与用户输入匹配，如果两者相同，则使用.show()来显示li标签。

演示代码：

 var hotels = [{ hotelName: 'Scandic Crown', location: 'Gothenburg', description: 'The best hotel in Gothenburg. Its gör best', price: 800 }, { hotelName: 'Scandic Alvik', location: 'Stockholm', description: 'Stockholms finest hotel', price: 1200 }, { hotelName: 'Scandic Triangeln', location: 'Malmö', description: 'One of the finest in Malmö, and with an amazing view of Malmö.', price: 1000 }, { hotelName: 'City Hotel Avenyn', location: 'Gothenburg', description: 'Great and cosy hotel in middle of Gothenburg', price: 750 }, { hotelName: 'Ice Hotel', location: 'Kiruna', description: 'The hotel that exists in the winter and looks like an igloo', price: 1250 }, { hotelName: 'Gålö Camping', location: 'Haninge', description: 'A great excursion in Stockholm', price: 995 } ]; var hotelListItem = document.getElementById('hotelCard'); var selectedHotelModal = document.getElementById("hotelModal"); //Get Modal var searchInput = document.getElementById("locationSearch"); function searchBarFeatures() { var hotelList = $("#hotelList"); hotelList.find("li").hide();//hide all li //loop through list and find p tag where location is there $("#hotelList").find(".hotelLocation").filter(function() { //check if value matches return $(this).text().toUpperCase().indexOf(searchInput.value.toUpperCase()) == 0; }).parent().show(); //show } function hotelList() { for (let i = 0; i < hotels.length; i++) { const hotel = hotels[i]; const hotelCard = ('<li id="hotelCard"><h3 class="hotelName">' + hotel.hotelName + '</h3>' + '<p class="hotelLocation">' + hotel.location + '</p><dfn class="hotelDescription">' + hotel.description + ' <br></dfn><b class="priceOfStay">' + hotel.price + '</b><br>' + '<button onclick="openSelectedHotelModal()" class="selectHotelBtn">Select this hotel</button></li>'); $(document).ready(function() { var hotelList = $("#hotelList"); hotelList.append(hotelCard); }); } } window.onload = hotelList;

 <body> <div class="header"> <h1>Kevs Hotel</h1> <input type="search" id="locationSearch" name="location" placeholder="Location" onkeyup="searchBarFeatures()"> <input type="date" class="checkInTime" name="checkInDate" placeholder="Check in" required> <input type="date" class="checkOutTime" name="checkOutDate" placeholder="Check out"> <input type="number" class="noOfGuests" name="NoOfGuests" placeholder="Guests"> <input type="submit" class="submitBtn" value="Search"> </div> <ul id="hotelList"> </ul> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

jQuery 中通过搜索查询过滤的呈现列表项的问题

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-09-02 16:40:10

jQuery 中通过搜索查询过滤的呈现列表项的问题

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-09-02 16:40:10

解决方案1
1 已采纳 2020-09-02 16:40:10