I am trying to create a search field, searching for cities in Denmark. I have an API with JSON to get all the cities, but there is a lot of data and therefore it takes time to load the page.

Is there any way, that I can load data from this API after the user has typed in the field?

Here is a snipped of the javascript/php I am using to get the data. Here you can see the link of all the cities too.

var cities = [];

            <?

                $citiesData = file_get_contents('https://api.dataforsyningen.dk/steder?hovedtype=Bebyggelse&undertype=by');
                $cityJson = json_decode($citiesData, true);

                for ($x = 0; $x <= count($cityJson) - 1; $x++) {
            ?>
                    cities.push("<? echo $cityJson[$x]["primærtnavn"]; ?>");

            <?
                }
            ?>

After this I am using the autocomplete javascript function from W3School, which can be found here: https://www.w3schools.com/howto/howto_js_autocomplete.asp

How can I make this so it does not take long for the page to load?