Build a Custom SwiftUI Search Bar Using LazyVStack With Sections and Section Index

Let’s create a country picker iOS app

Photo by Markus Winkler on Unsplash

In this short tutorial, we will implement our custom search bar, LazyVStack which contains data with sections and section index — inspired from this StackOverflow question.

First things first, let's explain what we want to achieve here. Imagine that we need to implement a searchable or filtered list of values, where the user needs to pick one of them.

In this example, we are implementing a country code picker, where our list contains a list of countries with their respective country code. The user picks one item from the list and then goes back to enter the phone number.

Our finished product will look like this:

As we can see, we have a list of items with sections. Every section has an index on the right side of the screen and when we click on the index value, our list is scrolled to the chosen section. Also when we enter text in the search bar, our list of items with sections is filtered.

So let's create our project. The structure of our project will look like this:

First, we need to add CountryCodes.json file. The structure of file looks like this:

So let's create our CountryModel.swift that will hold our data from JSON file.

Next, we will implement CountryCodeViewModel.swift, that is responsible for fetching data from JSON files, and for creating sections.

As we can see in the previous code section when we initialize our view model we initialize array or countries from JSON file.

Next, we will add CountryItemView.swift what will represent our clickable list item.

So, the last thing that is left to implement is CountryCodeView.swift. It combines all the previous code. So let's break the body of our view into multiple parts.

The search bar is custom-created as shown below:

Next important component is countriesListView:

Let's stop right here and explain the most important part of the app.

First of all, we added LazyVStack inside of ScrollView and ScrollViewReader with sections. Every section that is child view inside of LazyVStack, is pinned with pinnedViews:[.sectionHeaders].

Next, we iterate through each section or letter in an array of sections and add section as CountrySectionHeaderView.

The first filter that we have used is the section filter, which filters our section array by calling searchForSection function and depending on the first letter of search bar text that is entered by the user:

self.searchForSection($0)

Next, while we iterate through sections we filter our country names in our view model by taking the first letter of each country and comparing it to the letter of the current section. This filter is adding filtered countries to the desired section.

(countryModel) -> Bool in countryModel.name.prefix(1) == letter

At the same time, we use another filter for our search bar input that filters countries in our view model by calling searchForCountry function. This function is filtering countries depending on the string that the user has entered in the search bar.

self.searchForCountry(countryModel.name)

scrollProxy from ScrollViewReader allows us to scroll to the top of each section of our clicked index list item.

scrollProxy.scrollTo(target, anchor: .topLeading)

We are doing this by listening value of our state variable scrollTarget. This variable is changing in lettersListView index list, every time we click letter button item from that list.

Button(action: {
   if countryCodeViewModel.countryCodes.first(where: {    $0.name.prefix(1) == letter }) != nil {
         scrollTarget = letter
   }
}

And last part is lettersListView.

That is it, hope you have enjoyed this tutorial, and stay tuned for more content.

The code is available in the below GitHub repository:

GitHub - kenagt/CustomSearchbarIOS: Custom search bar for IOS with LazyVStack, filtering and…