Poirrier pro asked 5 years ago

  Depending of the country selected, I need to change the list of values (golf venues) for the autocomplete. My current implementation does not clear the list of values when I change the country and keep added the list. By default the country is set to France.
Start your code here
<!DOCTYPE html> <html lang="fr"> <!--#include file=include/Version.html --> <head> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>seeGolfStats</title> <!-- Font Awesome --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css?ver={{version}}"> <!-- Bootstrap core CSS --> <link rel="stylesheet" href="../../css/bootstrap.min.css?ver={{version}}"> <!-- Material Design Bootstrap --> <link rel="stylesheet" href="../../css/mdb.css?ver={{version}}"> </head> <body class="white-skin"> <!--Main layout--> <main> <section> <div class="container-fluid"> <div class="md-form form-sm"> <div> <select class="mdb-select" name="Country" id="Country" onChange="updateVenuesOptions();" required> <option value="" disabled selected>choose a country</option> <option value="FRA">France</option> <option value="BE">Belgique</option> </select> </div> </div> <div class="md-form form-sm"> <input type="search" id="Golf" name="NomGolf" class="form-control mdb-autocomplete"> <button class="mdb-autocomplete-clear"> <svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="https://www.w3.org/2000/svg"> <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" /> <path d="M0 0h24v24H0z" fill="none" /> </svg> </button> <label for="Golf" class="active">Choose a golf club</label> </div> <div> </section> </main> <!-- JQuery --> <script src="../../js/jquery-3.2.1.min.js"></script> <!-- Bootstrap tooltips --> <script type="text/javascript" src="../../js/popper.min.js?ver={{version}}"></script> <!-- Bootstrap core JavaScript --> <script type="text/javascript" src="../../js/bootstrap.js?ver={{version}}"></script> <!-- MDB core JavaScript --> <script type="text/javascript" src="../../js/mdb.min.js?ver={{version}}"></script> <script> var BE_Venues = ["BERCUIT","CLEYDAEL G&CC","GOLF DU MONT GARNI","HULENCOURT","LA BRUYèRE","MONT GARNI","PIERPONT","RAVENSTEIN","ROYAL ANTWERP GOLF CLUB","ROYAL GOLF CLUB OF BELGIUM","ROYAL WATERLOO","SEPT FONTAINES"]; var FRA_Venues = ["24 HEURES - LE MANS (Le Mans)","AA SAINT OMER CLUB (Le Val)","AA SAINT OMER CLUB (La Drève + Le Val aller)","ABBAYE DE 7 FONTAINE (Sept Fontaines)","ABBEVILLE (Héron Cendré)","ABLEIGES (Les Etangs)","AILETTE (Lac)","AIX LES BAINS","AIX-MARSEILLE (Aix Marseille)","AIX-MARSEILLE (Compact Débutants/Jeunes)","AJONCS OR (Ajoncs d'Or)","ALBI LASBORDES (Albi)","ALBON (Les Seigneurs)","ALBRET","ALPES PROVENCE GAP BAYARD (Alberto)","ALSACE CLUB (Alsace)","AMIENS","AMIRAUTE (L'Amirauté)","AMMERSCHWIHR (Eagle)","AMMERSCHWIHR (Albatros)","AMNEVILLE","ANGERS","ANGOULEME HIRONDELLE (Hirondelle)","ANJOU","ANSE (9 Trous)","APREMONT CLUB (Apremont)","ARCACHON","ARCANGUES","ARCS (Le Chantel)","ARDENNES CLUB (Ardennes)","ARIEGE (Ariège)","ARRAS","AUBAZINE","AUCH-EMBATS (Auch)","AVRILLE (Avrillé)","BADEN","BARBAROUX","BASSIN BLEU (Eucalyptus-Ravines)","BAUGE (Bauge Pontigné)","BAULE (Rouge)","BAULE (Bleu)","BAULE (Bleu U12/Benjamin Garçon)","BAULE (Bleu U12/Benjamines Filles)","BAYEUX OMAHA BEACH GOLF (La Mer - Bocage)","BAYEUX OMAHA BEACH GOLF (Bocage - L'Etang)","BAYEUX OMAHA BEACH GOLF (L'Etang - La Mer)","BAYEUX OMAHA BEACH GOLF (Manoir)","BEAUJOLAIS","BEAUNE LEVERNOIS (Beaune)","BEAUVALLON","BEGARD (Bégard)","BELESBAT","BELLE DUNE","BELLEFONTAINE CLUB (Blanc-Jaune)","BELLEFONTAINE CLUB (Blanc-Rouge)","BELLEFONTAINE CLUB (Rouge-Blanc)","BELLEFONTAINE CLUB (Rouge-Jaune)","BELLEFONTAINE CLUB (Bellefontaine)","BELLEME SAINT MARTIN","BESANCON (De la Chevillotte)","BETHEMONT CLUB (Langer)","BIARRITZ (Biarritz Cup)","BIARRITZ","BIGORRE","BIOT","BISCARROSSE (Océan-Lac)","BISCARROSSE (Forêt-Océan)","BISCARROSSE (Lac-Forêt)","BITCHE (L'Ecureuil)","BITCHE (La Citadelle)","BITCHE (L'Albatros)","BOIS DE RUMINGHEM (Ruminghem)","BOIS O (Genêts - Etang)","BOIS O (Etang - Pommiers)","BOIS O (Pommiers - Genêts)","BONDOUFLE VAL-GRAND (Bondoufle)","BONDUES (Hawtree)","BONDUES (Trent Jones)","BORDEAUX-CAMEYRAC (Bordeaux Cameyrac)","BORDEAUX-LAC (Les Petits Etangs)","BORDEAUX-LAC (Les nouveaux Etangs)","BORDEAUX-LAC (La Jalle)","BORDEAUX-LAC (Les Etangs)","BORDELAIS","BOSSEY (Bossey senior)","BOSSEY","BOUCLES DE SEINE (Moisson-Mousseaux)","BOULEAUX (Les Bouleaux)","BOURBON","BOURBON (In-Out)"]; function updateVenuesOptions(){ var country = document.getElementById("Country").value; document.getElementById("Golf").value = ""; if (country == "FRA") { $('.mdb-autocomplete').mdb_autocomplete({ data:FRA_Venues }) } if (country == "BE") { $('.mdb-autocomplete').mdb_autocomplete({ data:BE_Venues }) } }; jQuery(document).ready(function() { $('.mdb-select').material_select(); $('.mdb-autocomplete').mdb_autocomplete({ data:FRA_Venues}); }); </script> </body> </html>  

Poirrier pro answered 5 years ago

Many thanks, it's working with the remove

Mikołaj Smoleński staff answered 5 years ago

It's interesting. I've copied Your code and it's working fine. Do You have any errors in console? Are You sure that all paths to scripts are correct?

Mikołaj Smoleński staff commented 5 years ago

Try to change Your code like this: if (country == "FRA") { $('.mdb-autocomplete-wrap').remove(); $('.mdb-autocomplete').mdb_autocomplete({ data:FRA_Venues }) } if (country == "BE") { $('.mdb-autocomplete-wrap').remove(); $('.mdb-autocomplete').mdb_autocomplete({ data:BE_Venues }) } It is reseting the form before the new autocomplete.

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • User: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: Yes
  • Provided link: No