【发布时间】：2020-09-02 15:30:53
【问题描述】：
我正在制作一个酒店网站作为一个爱好项目，但是在尝试根据酒店位置的搜索查询呈现列表项时。
最初，我正在渲染我存储在数组中的所有酒店，但是当我按位置搜索时，假设我输入“斯德哥尔摩”，然后我想显示在斯德哥尔摩有位置的酒店的所有列表项。
现在我只能在键入与项目匹配的位置时隐藏所有列表项目。
这是我的代码：
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()">⊠</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;
我真的想显示我在搜索栏中输入位置的酒店，例如，如果我输入 Stockholm，我想呈现所有酒店及其在斯德哥尔摩的位置。
感谢所有帮助。 提前谢谢你
【问题讨论】：
标签： javascript jquery filter