Mdb autocomplete

Topic: Mdb autocomplete

Poirrier pro asked 6 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">  <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>  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css?ver={{version}}">  <link rel="stylesheet" href="../../css/bootstrap.min.css?ver={{version}}">  <link rel="stylesheet" href="../../css/mdb.css?ver={{version}}"> </head> <body class="white-skin">  <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>  <script src="../../js/jquery-3.2.1.min.js"></script>  <script type="text/javascript" src="../../js/popper.min.js?ver={{version}}"></script>  <script type="text/javascript" src="../../js/bootstrap.js?ver={{version}}"></script>  <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>

Add comment

Poirrier pro answered 6 years ago

0 0 Best answer

Many thanks, it's working with the remove

Add comment

Mikołaj Smoleński staff answered 6 years ago

0 0 Best answer

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 6 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.

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

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

Poirrier

Pro User 10Support score
2Questions 1Answers 0Snippets