Как сделать autocomplete с api travelpayouts

Нужно сделать autocomplete c django, есть такой код:

{% load static %}
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Airport JS demo page</title>
    <link rel="stylesheet" href="{% static "css/custom.css" %}" />
</head>
<body>

    <div class="logo"><img src="https://konsalex.github.io/Airport-Autocomplete-JS/assets/img/airportjs.png" alt=""></div>
    <div class="section group">
        <div class="col span_1_of_5">

        </div>
        <div class="col span_1_of_5" style="text-align: center">
            <input type="text" id="autocomplete-airport-1" class="inp" placeholder="Flight from" onchange="checkDistance(this)">
            <span class="border"></span>
        </div>
        <div class="col span_1_of_5" style="text-align: center">
            Calculated Distance
            </br>
            <strong id="distance">. . .</strong>
        </div>
        <div class="col span_1_of_5" style="text-align: center">

            <input type="text" id="autocomplete-airport-2" class="inp" placeholder="Flight To" onchange="checkDistance(this)">
            <span class="border"></span>
        </div>
        <div class="col span_1_of_5">

        </div>
    </div>

</body>

<script type="text/javascript" src="{% static "js\index.js" %}"></script>
<script type="text/javascript" src="{% static "json\airports.json" %}"></script>
<script type="text/javascript" src="{% static "js\fuse.min.js" %}"></script>
<script type="text/javascript" src="{% static "js\airport.js" %}"></script>
<script type="text/javascript" src="{% static "js\polyfill.min.js" %}"></script>
<script type="text/javascript" src="{% static "js\tests.js" %}"></script>
<script>
    AirportInput("autocomplete-airport-1");

    // Example options for Formatting
    var options = {
        formatting: `<div class="$(unique-result)"
                     single-result" 
                     data-index="$(i)"> 
                   $(city) </div>`
    };
    AirportInput("autocomplete-airport-2");

    //Great Circle Distance calculation fuction
    function distance(lat1, lon1, lat2, lon2) {
        var R = 6371e3; // metres

        lat1 = parseFloat(lat1)
        lat2 = parseFloat(lat2)
        lon1 = parseFloat(lon1)
        lon2 = parseFloat(lon2)

        var f1 = lat1.toRadians();
        var f2 = lat2.toRadians();
        var df = (lat2 - lat1).toRadians();
        var dl = (lon2 - lon1).toRadians();

        var a = Math.sin(df / 2) * Math.sin(df / 2) +
            Math.cos(f1) * Math.cos(f2) *
            Math.sin(dl / 2) * Math.sin(dl / 2);
        var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));

        var d = R * c;

        return d;
    }
    if (typeof (Number.prototype.toRadians) === "undefined") {
        Number.prototype.toRadians = function () {
            return this * Math.PI / 180;
        }
    }

    function checkInputData(id) {
        var realId = "autocomplete-airport-" + id
        return ([document.getElementById(realId).getAttribute("data-lat"), document.getElementById(realId).getAttribute(
            "data-lon")])
    }

    function checkDistance(self) {
        console.log("Input changed: " + self["id"])
        setTimeout(function () {
            console.log(self.getAttribute("data-lon"))
            var idChanged = self["id"].slice(-1)
            console.log(checkInputData(1))
            console.log(checkInputData(2))
            if (checkInputData(1)[0] && checkInputData(2)[0]) {
                document.getElementById("distance").innerHTML = distance(...checkInputData(1), ...
                    checkInputData(2)) / 1000 + " Km";
            }
        }, 200)

    }
</script>

</html>```

[![Ошибки][1]][1]


  [1]: https://i.stack.imgur.com/9OKho.png
Вернуться на верх