SwiftUI - Search Bar

Search bar is a special UI control in SwiftUI; it provides an interface in which the user is allowed to search for any information or data in the given app by writing a query in it. It includes a text field where user can write their query and some additional elements like icons, and a clear or cancel button. It is the most commonly used control in all Apple's platforms, such as macOS, iOS, watchOS, iPad, etc.

It is generally used in finding some data or app, navigation, data retrieval, etc., from a larger amount of data, for example, in a contact app, we use a search bar to quickly find the name of the person by entering the initial characters of their name.

Creating Search Bar in SwiftUI

In SwiftUI, we can create a search bar with the help of searchable() modifier. This modifier is used to make the specified view searchable. means using this modifier, we can create a textable field into the searchable field.

Syntax

Following is the syntax −

Searchable(
text: BindingVariable, 
placement: SearchFieldPlacement,
prompt: String) -> some View

Parameters

Following parameters are used by this view −

• text: Represent the text that will be displayed or edited in the search field.

• placement: Represent the placement of the search field in the container view. By default, its value is automatic, but we can it to navigationBarDrawer, sidebar, or toolbar.

• prompt: Guide the users on what to search or display the search-related data.

Example 1

The following SwiftUI program creates a simple search bar.

import SwiftUI
struct ContentView: View {
   @State private var searchData: String = ""   
   var body: some View {
      NavigationStack{
         Text("Searching data:\(searchData)")
            .navigationTitle("Search Here")
      }.searchable(text: $searchData).foregroundStyle(.red)
   }
}
#Preview {
   ContentView()
}   

Output

Example 2

The following SwiftUI program creates a search bar. Here we will create a search bar that contains suggestions which are displayed in the form list. Now, using this search bar, we can search specified programming languages easily.

import SwiftUI
struct ProgrammingLanguage: Identifiable {
   let id = UUID()
   let name: String
}
struct ContentView: View {
   @State private var searchData: String = ""
   
   let lang: [ProgrammingLanguage] = [
      ProgrammingLanguage(name: "C"),
      ProgrammingLanguage(name: "C++"),
      ProgrammingLanguage(name: "Java"),
      ProgrammingLanguage(name: "Python"),
      ProgrammingLanguage(name: "C#"),
      ProgrammingLanguage(name: "Swift"),
      ProgrammingLanguage(name: "Go"),
      ProgrammingLanguage(name: "Ruby"),
      ProgrammingLanguage(name: "Scala"),
      ProgrammingLanguage(name: "JavaScript"),
      ProgrammingLanguage(name: "JQuery"),
      ProgrammingLanguage(name: "Objective-C")
   ]   
   var body: some View {
      NavigationStack {
         List {
            ForEach(lang.filter { searchData.isEmpty || $0.name.localizedCaseInsensitiveContains(searchData) }) { language in
               Text(language.name)
            }
         }.navigationTitle("Programming Languages")
      }.searchable(text: $searchData)
   }
}
#Preview {
   ContentView()
}   

Output