Блог

Главная - Вопросы по программированию - Проблема с отображением элемента списка, отфильтрованного по поисковому запросу в jQuery

Проблема с отображением элемента списка, отфильтрованного по поисковому запросу в jQuery

#javascript #jquery #filter

#javascript #jquery #Фильтр

Вопрос:

Я создаю веб-сайт отеля в качестве хобби-проекта, но при попытке отобразить элементы списка в зависимости от поискового запроса по местоположению отелей.

Изначально я отображаю все отели, которые я сохранил в массиве, но когда я выполняю поиск по местоположению, допустим, я набираю «Стокгольм», тогда я хочу показать все элементы списка отелей с местоположением в Стокгольме.

Прямо сейчас я могу скрыть все элементы списка только при вводе местоположения, соответствующего элементу.

Вот мой код:

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()">amp;#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;

Я действительно хочу показать отели, местоположение которых я набираю в строке поиска, например, если я набираю Стокгольм, я хочу отобразить все отели с его местоположением в Стокгольме.

Любая помощь приветствуется. Заранее благодарю вас

Ответ №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>