List of zip/cities as autocompelete combobox in account page

Pages/AccountPage.razor

 @inject ReportDataProvider ReportDataProvider
 @inject Toaster Toaster
 @inject InputCursorHandler InputCursorHandler
+@inject MasterDataService MasterDataService
 
 
 <div class="row px-3 h-100">
                                 OnKeyDown="@InputCursorHandler.OnKeyDownHandlerAsync"></MatStringField>
             </div>
         </div>
+
         <div class="row no-gutters align-items-center w-100">
-            <div class="col-4" style="padding-right:0.5em">
-                <MatStringField Class="w-100" Label="@I18n["Zip"]" Outlined="true" type="text" @bind-Value="@Account.Zip"
-                                OnKeyDown="@InputCursorHandler.OnKeyDownHandlerAsync"></MatStringField>
-            </div>
-            <div class="col-8" style="padding-left:0.5em">
-                <MatStringField Class="w-100" Label="@I18n["City"]" Outlined="true" type="text" @bind-Value="@Account.City"
-                                OnKeyDown="@InputCursorHandler.OnKeyDownHandlerAsync"></MatStringField>
+            <div class="col-12">
+                <div class="outlined">
+                    <MatAutocompleteList TItem="ZipCity" FullWidth="true" Label="@getZipCityLbl()" Required="true" Items="@ZipCities" OnTextChanged="setZipCityValue" @bind-Value="SelectedZipCity" CustomStringSelector="@(i => i?.Zip_City)"
+                                         ShowClearButton="true" NumberOfElementsInPopup="6" @onkeydown="InputCursorHandler.OnKeyDownHandlerAsync">
+                        <ItemTemplate>
+                            <div>
+                                <span>@context?.Zip_City</span>
+                            </div>
+                        </ItemTemplate>
+                    </MatAutocompleteList>
+                </div>
             </div>
         </div>
         <div class="row no-gutters align-items-center w-100">
 
     private UserData Account = new();
 
+    private string zipCityStringValue;
+    private ZipCity selectedZipCity;
+    private ZipCity SelectedZipCity {
+        get { return selectedZipCity; }
+        set { selectedZipCity = (value != null) ? value : new ZipCity(zipCityStringValue); }
+    }
+    private void setZipCityValue(string value) {
+        zipCityStringValue = value;
+        selectedZipCity = null;
+    }
+
+    private ZipCity[] ZipCities {
+        get => MasterDataService.ZipCities;
+    }
+
     protected async override void OnInitialized() {
         base.OnInitialized();
         PageHistoryManager.OnBeforeNavigateBack = new EventCallback(this, (Action)OnBeforeNavigateBack);
         if (!string.IsNullOrEmpty(FromRoute) && ReportDataProvider.Report != null) {
             UserDataProvider.MapUserData(Account, ReportDataProvider.Report);
         }
+        setZipCityValue(Account.Zip + " " + Account.City);
+        SelectedZipCity = Array.Find(ZipCities, zipCity => (zipCity.Zip.Equals(Account.Zip) && zipCity.City.Equals(Account.City)));
         StateHasChanged();
     }
 
 
     private async Task SaveUserData() {
         try {
+            Account.Zip = SelectedZipCity.Zip;
+            Account.City = SelectedZipCity.City;
             Validator.ValidateAccount(Account);
             await UserDataProvider.Save(Account);
             Toaster.ShowSuccess(I18n.GetString("Success.SaveUserdata.Title"), I18n.GetString("Success.SaveUserdata.Msg"));
 
     private async void SaveUserDataAndClose() {
         try {
+            Account.Zip = SelectedZipCity.Zip;
+            Account.City = SelectedZipCity.City;
             Validator.ValidateAccount(Account);
             await UserDataProvider.Save(Account);
             Toaster.ShowSuccess(I18n.GetString("Success.SaveUserdata.Title"), I18n.GetString("Success.SaveUserdata.Msg"));
         return await UserDataProvider.Get();
     }
 
+    private string getZipCityLbl() {
+        return String.Format("{0} {1} ({2})", I18n.GetString("Zip"), I18n.GetString("City"), I18n.GetString("PlaceOfDiscovery"));
+    }
+
     private void Next() {
         PageHistoryManager.AddPageToHistory(NavigationManager.Uri);
         try {

Pages/Fundvelo/CaritasServiceFundVeloMissingKeyDataPage.razor

                         </div>
                         <div class="mat-layout-grid-cell mat-layout-grid-cell-span-4-phone mat-layout-grid-cell-span-8-tablet mat-layout-grid-cell-span-12-desktop">
                             <MatStringField Class="w-100 form-check-label" Label="@I18n["FrameNumber"]" Outlined="true" type="text" @bind-Value="frameNumber"
-                             OnKeyDown="@InputCursorHandler.OnKeyDownHandlerAsync">></MatStringField>
+                             OnKeyDown="@InputCursorHandler.OnKeyDownHandlerAsync"></MatStringField>
                         </div>
                     </div>
                 </div>

Shared/Models/Fundvelo/ZipCity.cs

             Zip_City = zipCity;
             Zip = zipCity.Split(' ')[0];
             City = zipCity.Replace(Zip + " ", "");
+        }
 
+        public ZipCity(string _zip, string _city) {
+            Zip = _zip;
+            City = _city;
+            Zip_City = _zip + " " + _city;
         }
+
     }
 }

Shared/Services/UserDataProvider.cs

             report.PersonOrt = userData.City;
             report.PersonPLZ = userData.Zip;
             report.PersonStrasse = userData.Address;
-            report.Mobil = userData.Phone;
+            report.Mobil = userData.Mobile;
             report.Mail = userData.Email;
         }
 

wwwroot/css/app.css

     opacity: 1;
 }
 
+div.mat-autocomplete-list.mat-autocomplete-list-wrapper {
+    margin-bottom: 0.5rem;
+}
+
 div.outlined label.mat-text-field {
     border-bottom-right-radius: 4px;
     border-bottom-left-radius: 4px;