javascript - 我已经使用 javascript/firebase 构建了应用程序，并希望它返回最后 5 个搜索并使每个搜索都可点击

Question

我已经构建了一个运行良好的应用程序。唯一的问题是我试图让它在我的 HTML div 中显示最近 5 个搜索，ID 为centreSearches。我希望它们中的每一个都是可点击的并返回它们之前返回的结果。我将底部的 HTML div 引用为:let recentSearchesDiv = $('#recentSearches')

<script src="https://www.gstatic.com/firebasejs/5.10.1/firebase.js"></script>
var config = {
  apiKey: "AIzaSyCzaNmYb94HQPR70d6Omy5kP1d0kw5NLkc",
  authDomain: "eventtraveler-69f59.firebaseapp.com",
  databaseURL: "https://eventtraveler-69f59.firebaseio.com",
  projectId: "eventtraveler-69f59",
  storageBucket: "eventtraveler-69f59.appspot.com",
  messagingSenderId: "73086206077"
};

firebase.initializeApp(config);

var database = firebase.database();
// slider functionality
$(document).ready(function () {
    $('.slider').slider({ full_width: true });
});


var $hotelsContainer = $("#hotel-results");
var $eventsContainer = $("#events-results");

// input fields
var $city = $("#location-input");
var $checkInDate = $("#start-date-input");
var $checkOutDate = $("#end-date-input");
var $submit = $("#add-event");

// make global variable so functions can access
var city = "";
var checkin = "";
var checkout = "";
var pleaseWait = "";


// CORS un-blocker for eventful API
jQuery.ajaxPrefilter(function(options) {
  if (options.crossDomain && jQuery.support.cors) {
      options.url = "https://cors-anywhere.herokuapp.com/" + options.url;
  }
});

function getHotels(city) {
  // find location code
  $.ajax({
    url:
      "https://apidojo-kayak-v1.p.rapidapi.com/locations/search?where=" + city,
    method: "GET",
    headers: {
      "X-RapidAPI-Host": "apidojo-kayak-v1.p.rapidapi.com",
      "X-RapidAPI-Key": "811b0b509bmshf44ab7ab1214e55p19e182jsnc61a98a0c578"
    }
  }).then(function(response) {
    console.log(response);
    console.log(response[0].ctid); // MAKE SURE IT'S A CITY

    // make sure it's a city (response returns city and airport codes)
    $.each(response, function(i, value) {
      if (response[i].loctype === "city") {
        console.log("this is a city");
        console.log(i + ", " + value);
        citycode = response[i].ctid;
        console.log(citycode);
        return false;
      }
    });

    // now that we have the location code, we can use it to find hotels
    $.ajax({
      url:
        "https://apidojo-kayak-v1.p.rapidapi.com/hotels/create-session?rooms=1&citycode=" +
        citycode +
        "&checkin=" +
        checkin +
        "&checkout=" +
        checkout +
        "&adults=1",
      method: "GET",
      headers: {
        "X-RapidAPI-Host": "apidojo-kayak-v1.p.rapidapi.com",
        "X-RapidAPI-Key": "811b0b509bmshf44ab7ab1214e55p19e182jsnc61a98a0c578"
      }
    }).then(function(response) {
      console.log("kajak success");
      console.log(response);
      console.log(response.hotelset);

      // reference for hotel list
      var hotelListMain = response.hotelset;
      var hotelList = response.hotelset;
      // only keep 10 results
      if (hotelList.length > 10) {
        hotelList.length = 10;
      }

      console.log(hotelList);

      // if no results
      if (hotelList.length === 0) {
        console.log("no results");
        var newP = $("<p>").text("No results.");
        $hotelsContainer.append(newP);
      }

      // go through each hotel and show on page
      $.each(hotelList, function(i, value) {
        console.log("hotel " + i);

        // get relevent info
        if (response.hotelset[i].brand !== undefined) {
            var hotelName = response.hotelset[i].brand;
        } else {
            var hotelName = response.hotelset[i].name;
        }
        var hotelAddress = response.hotelset[i].displayaddress;
        var hotelRating = response.hotelset[i].ratinglabel;
        var hotelStarCount = response.hotelset[i].stars;
        var hotelThumbnail =
          "https://kayak.com" + response.hotelset[i].thumburl;

        // if cheapest provider object is included
        console.log("t/f: " + response.hotelset[i].cheapestProvider !== undefined);

        if (response.hotelset[i].cheapestProvider !== undefined) {
          var cheapestProviderName = response.hotelset[i].cheapestProvider.name;
          var bestPrice =
            response.hotelset[i].cheapestProvider.displaybaseprice;
          var linkToHotel =
            "https://kayak.com" + response.hotelset[i].cheapestProvider.url;
        } else {
          var cheapestProviderName = response.hotelset[i].brand;
          var bestPrice = response.hotelset[i].price;
          var linkToHotel = "https://kayak.com" + response.hotelset[i].shareURL;
        }

        //create elements for html
        var newTitle = $("<h5>").text(
          hotelName + " (via " + cheapestProviderName + ")"
        );
        var newAddress = $("<p>").text(hotelAddress);
        var newPrice = $("<p>").text(bestPrice);
        var newRating = $("<p>").text(
          hotelRating + ", " + hotelStarCount + " stars"
        );
        var newImage = $("<img>").attr("src", hotelThumbnail);
        var newLink = $("<a>")
          .attr("href", linkToHotel)
          .text("see hotel");

        // img container
        var imgContainer = $("<div>")
          .addClass("card-image")
          .append(newImage);

        var content = $("<div>")
          .addClass("card-content")
          .append(newTitle, newAddress, newPrice, newRating);
        var action = $("<div>")
          .addClass("card-action")
          .append(newLink);

        // content container
        var allContentContainer = $("<div>")
          .addClass("card-stacked")
          .append(content, action);

        // make parent div for this hotel
        var newHotelDiv = $("<div>")
          .append(imgContainer, allContentContainer)
          .addClass("card horizontal");

        // add this hotel's div to the hotel container
        $hotelsContainer.append(newHotelDiv);

        // remove wait message
        pleaseWait.remove();

      });
    });
  });
}


function displayEvent() {
    $("#events-results").empty();

    var where = $("#location-input")
        .val()
        .trim();

    var start = moment($("#start-date-input").val()).format("YYYYMMDD00");
    var end = moment($("#end-date-input").val()).format("YYYYMMDD00");


    // search for button name in omdb and show info underneath
    var queryURL =
        "https://api.eventful.com/json/events/search?" +
        "app_key=n69CWBNZRrGZqdMs" +
        "&l=" +
        where +
        "&t=" +
        start +
        "-" +
        end;

    console.log(queryURL);

    $.ajax({
        url: queryURL,
        method: "GET"
    }).then(function(response) {
        var schema = JSON.parse(response);
        console.log(schema.events);
        console.log(schema.events.event);
        // if no results
        if (schema.events.event.length === 0) {
            console.log("no event results");
            var newP = $("<p>").text("No results.");
            $eventsContainer.append(newP);
        }

        for (var i = 0; i < schema.events.event.length; i++) {
            total = parseFloat(i) + 1;

            //create elements for html
            var eventTitle = $("<h5>").text(schema.events.event[i].title);
            var eventAddress = $("<p>").text(
                schema.events.event[i].venue_address +
                ", " +
                schema.events.event[i].city_name +
                ", " +
                schema.events.event[i].postal_code
            );
            var eventLink = $("<a>")
                .attr("href", schema.events.event[i].url)
                .text("see event");

            // img container
            if (schema.events.event[i].image !== null) {
                var eventimage = schema.events.event[i].image.medium.url;
                if (eventimage.includes("http")) {
                    var neweventImage = $("<div>")
                        .addClass("card-image")
                        .append("<img src='" + eventimage + "'/>");
                } else {
                    var neweventImage = $("<div>")
                        .addClass("card-image")
                        .append("<img src='https:" + eventimage + "'/>");
                }
            }

            // start time
            var begins = schema.events.event[i].start_time;
            var days = schema.events.event[i].all_day;
            if (begins.includes("00:00:00")) {
                var date = begins.slice(0, 10);
                var startTime = $("<p>").text("Starts on " + date + ". Happening for " + days + " days");
            } else {
                var date = begins.slice(0, 16);
                var startTime = $("<p>").text(begins);
            }

            //build container
            var eventContent = $("<div>")
                .addClass("card-content")
                .append(eventTitle, eventAddress, startTime);
            var eventAction = $("<div>")
                .addClass("card-action")
                .append(eventLink);

            // content container
            var eventContentContainer = $("<div>")
                .addClass("card-stacked")
                .append(eventContent, eventAction);

            // make parent div for this event
            var newEventDiv = $("<div>")
                .append(neweventImage, eventContentContainer)
                .addClass("card horizontal");

            // add this event's div to the event container
            $("#events-results").append(newEventDiv);


        }

    })
}


$submit.on("click", function (event) {
    event.preventDefault();

    // clear out current results
    $hotelsContainer.empty();
    $eventsContainer.empty();

    // save their inputted data
    city = $city.val().trim();
    checkin = $checkInDate.val();
    checkout = $checkOutDate.val();
    var citycode = "";

    // if user filled out all fields
    if (city !== "" && checkin !== "" && checkout !== "") {
        // show message that results are being generated - so user knows button did submit
        if ($(".please-wait").length === 0) {
            console.log("results are generating....please wait");
            pleaseWait = $("<p>").text("Searching for results...").addClass("please-wait");
            $(document.body).append(pleaseWait);
            pleaseWait.insertAfter($submit);
        }

        // get hotel results and display them
        //getHotels();

        // get event results and display them
        //displayEvent();

        // construct object literal for firebase
        let travelEvent = {
          city,
          checkin,
          checkout
        };

        // add event to firebase
        database.ref().push(travelEvent)

        database.ref().limitToLast(5).on("value", snapshot => {
          let keys = Object.keys(snapshot.val())

          let recentSearchesDiv = $('#recentSearches');
          recentSearchesDiv.empty();

          for(let i = 0; i < keys.length; i++) {
            let val = snapshot.val()[keys[i]]
            let city = val.city
            let checkin = val.checkin
            let checkout = val.checkout
            
            let search = $(`<div><span>City: ${city} </span><span>Check-in: ${checkin} </span><span>Check-out: ${checkout}</span></div>`);
            search.addClass('recentSearch')
            search.on('click', function(){

            })
            
            recentSearchesDiv.append(search)
          }
        });

        // clear inputs
        $city.val("");
        $checkInDate.val("");
        $checkOutDate.val("");
    } else {
        // show error message
        if ($(".required-error").length === 0) {
            var required = $("<p>").text("* All fields are required").addClass("required-error");
            $("#event-form").prepend(required);
        }
    }

});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>EventTraveler</title>
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <link rel="stylesheet" type="text/css "href="assets/css/style.css">
     
</head>
<body>
    <div class="container">
        <nav>
              <!--Creating NavBar-->
                <div class="nav-wrapper">
                  <img src="assets/images/logo2.png" class="brand-logo">
                </div>
        </nav> 
<!-- Slider Images -->
<div id="slider-container">
<div class="slider">
        <ul class="slides">
          <li>
            <img src="assets/images/beach.png">
          </li>
          <li>
            <img src="assets/images/concert.png"> 
          </li>
          <li>
            <img src="assets/images/mountain.png"> 
          </li>
          <li>
            <img src="assets/images/attraction.png"> 
          </li>
        </ul>

</div>
</div>
      
      <div>
          <h1>Search for hotels and events</h1>

      <!-- Create the form -->
        <form id="event-form">
          <label for="location-input" id="location">Enter city and state</label>
          <input type="text" id="location-input" /><br />
          <label for="start-date-input" id="checkin">Check In</label>
          <input type="date" id="start-date-input" /><br />
          <label for="end-date-input" id="checkout">Check Out</label>
          <input type="date" id="end-date-input" /><br />
          <!-- Button triggers new event to be added -->
          <input id="add-event" class="btn btn-info" type="submit" value="Search" />
        </form>
     </div>

     <div>
       <h4>Recent Searches</h4>
       <div id="recentSearches">
       </div>
     </div>

    
        <div class="banner-div">
          <img src="assets/images/banner.jpg" id= "banner">
        </div>
<!-- create cards right -->
      <div class="row">
        <div class="col s6" id = "right">
          <h3 class="header">Hotels</h3>
          <div id = "hotel-results">
          <div class="card horizontal">
            <div class="card-image">
              <img src="assets/images/hotels.jpg">
            </div>
            <div class="card-stacked">
              <div class="card-content">
                <p>Use the search form above to see results</p>
              </div>
            </div>
          </div>
        </div>
        </div>
<!-- create cards right -->
        <div class="col s6" id = "Left">
          <h3 class="header">Events</h3>
          <div id="events-results">
          <div class="card horizontal">
            <div class="card-image">
              <img src="assets/images/events.jpg">
            </div>
            <div class="card-stacked">
              <div class="card-content">
                  <p>Use the search form above to see results</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
      <footer class=“page-footer”>
        <div class=“footer-copyright”>
          <div class=“container”>
          © 2019 Los Cinco
          </div>
        </div>
      </footer>
      </div>
  
  
  <script src="https://code.jquery.com/jquery-3.4.0.min.js"integrity="sha256-BJeo0qm959uMBGb65z40ejJYGSgR7REI4+CW1fNKwOg="crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  <script src="https://www.gstatic.com/firebasejs/5.10.1/firebase.js"></script>
  <script src="https://cdn.jsdelivr.net/momentjs/2.12.0/moment.min.js"></script>
  <script src="assets/javascript/main.js"></script>
  

</body>

</html>

Answer 1

如果我理解正确的话，你唯一的问题是显示的元素超过 5 个？您可以对返回的结果设置限制。

https://dinosaur-facts.firebaseio.com/yourJson.json? 
orderBy="price"&limitToLast=5;

如您所见，您还可以按属性对其进行排序，例如定价，然后仅查询一组商品。还可以指定是否应按 ASC 或 DESC 排序。