SELECT 2 - <select> to much elements

How Do I...
#1

I use select2 for its autocomplete in a select. The problem is that I load a lot of cities in this select, and that makes freeze/lag for my customers which have a bad connection. I’m looking for a script which is able to doawload and autocomplete only when my user is searching a city, rather than load my 60 000 cities from my Database. And idea? Thank you. My code :

            <div class="form-group col-md-4">
              <label for="Ville">Ville</label>
              <input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" class="form-control client_ville_insert" />
              <datalist id="ice-cream-flavors">
                <select type="text" class="form-control">
                  <?php $list = $bdd->query('SELECT DISTINCT ville_nom FROM ville ORDER BY ville_nom ASC');
                  while ($data = $list->fetch()) { ?>
                      <option value="<?php echo $data['ville_nom']; ?>"> <?php echo $data['ville_nom']; ?></option>
                  <?php } $list->closeCursor(); ?>
                </select>
              </datalist>
            </div>
            <div class="form-group col-md-4">
              <label for="Postal">Code Postal</label>
              <div class="load_postalcode">
                Postal Code is load here
            </div>
#2

The Select2 AJAX feature does exactly what you need. It will query the data source only when the user types, and will only retrieve the records that match the user’s input (based, of course, on how your server-side code performs and processes the user’s search term). If the set of matching results could still be large, you can also take advantage of the pagination feature to retrieve just one page of results at a time.