AutoComplete TextField in Swift

UITextField can be used to add an autocomplete feature, like in Safari, to your iOS apps to suggest a word based on the characters your user types.

AutoComplete text field is a feature that shows completion suggestions automatically while the user is typing.

Please follow below steps to implement autocomplete TextField example in your iOS app.

Step 1: Add a TextField in your UIViewController and make an outlet of textField in ViewController class. Also set delegate of your text field to self in viewdidload().

Step 2: Declare an array of suggestions element to show in textField.

let suggestionsArray = [ "black", "blue", "green", "yellow", "orange", "purple" ]

1	let suggestionsArray = [ "black", "blue", "green", "yellow", "orange", "purple" ]

Step 3: Now, use UITextField delegate “shouldChangeCharactersIn” function to handle user input in textField.

func textField(_ textField: UITextField, shouldChangeCharactersIn range: NSRange, replacementString string: String) -> Bool {
        return !autoCompleteText( in : textField, using: string, suggestionsArray: suggestionsArray)
}

func textField(_ textField: UITextField, shouldChangeCharactersIn range: NSRange, replacementString string: String) -> Bool {

return !autoCompleteText( in : textField, using: string, suggestionsArray: suggestionsArray)

}

Step 4: TextField delegate method textField(_:shouldChangeCharactersIn:replacementString:) calls “autoCompleteText” method which searches the suggestion list for the first entry with the prefix matching the user input. And updates the text value with the identified suggestion. “autoCompleteText” method is defined as follows:

func autoCompleteText( in textField: UITextField, using string: String, suggestionsArray: [String]) -> Bool {
        if !string.isEmpty,
            let selectedTextRange = textField.selectedTextRange,
            selectedTextRange.end == textField.endOfDocument,
            let prefixRange = textField.textRange(from: textField.beginningOfDocument, to: selectedTextRange.start),
            let text = textField.text( in : prefixRange) {
            let prefix = text + string
            let matches = suggestionsArray.filter {
                $0.hasPrefix(prefix)
            }
            if (matches.count > 0) {
                textField.text = matches[0]
                if let start = textField.position(from: textField.beginningOfDocument, offset: prefix.count) {
                    textField.selectedTextRange = textField.textRange(from: start, to: textField.endOfDocument)
                    return true
                }
            }
        }
        return false
    }

func autoCompleteText( in textField: UITextField, using string: String, suggestionsArray: [String]) -> Bool {

if !string.isEmpty,

let selectedTextRange = textField.selectedTextRange,

selectedTextRange.end == textField.endOfDocument,

let prefixRange = textField.textRange(from: textField.beginningOfDocument, to: selectedTextRange.start),

let text = textField.text( in : prefixRange) {

let prefix = text + string

let matches = suggestionsArray.filter {

$0.hasPrefix(prefix)

}

if (matches.count > 0) {

textField.text = matches[0]

if let start = textField.position(from: textField.beginningOfDocument, offset: prefix.count) {

textField.selectedTextRange = textField.textRange(from: start, to: textField.endOfDocument)

return true

}

return false

}

The method returns true if the match was found otherwise returns false. The delegate method “shouldChangeCharactersIn” returns the inverse of this value so the text field will continue to process keystrokes when a match is not found.

Step 5 : Finally, the controller implements the delegate’s textFieldShouldReturn(_:) method to “confirm” the suggestion:

func textFieldShouldReturn(_ textField: UITextField) -> Bool {
        textField.resignFirstResponder()
        return true
}

func textFieldShouldReturn(_ textField: UITextField) -> Bool {

textField.resignFirstResponder()

return true

}

Step 6: Now, compile your project and you can see the results.

Hope this article helps you.

For any queries, please feel free to add a comment in the comments section.

Shikha Melkani

12 Dec, 2023
Updated by - shantanunautiyal.ui798
28 Dec, 2020
Updated by - Shikha Melkani

. . .

9 comments

Jihoo 4 years ago

Hello, Shikha.
Thank you very much. It is very helpful to me.

Rahul 3 years ago

This is not case sensitive if the text is ‘ABC’, and the user will search ‘abc’ then the ABC result will not match.

Shikha Melkani (Moderator) 3 years ago
You can make the search case insensitive by using below extension.

extension String {

public func hasPrefix(_ prefix: Prefix, caseSensitive: Bool) -> Bool where Prefix : StringProtocol {

if caseSensitive { return self.hasPrefix(prefix) }

let prefixRange = self.range(of: prefix, options: [.anchored, .caseInsensitive])
return prefixRange != nil
}
}

Then your search statement will be: $0.hasPrefix(prefix, caseSensitive: false)

Reply
IsaSam 3 years ago
Into your viewDidLoad() put this:
textField.autocapitalizationType = .allCharacters

Reply

Jonas 3 years ago

Thank you for this. Very interesting. And also the String extension with the caseInsensitive.

Mahboob 2 years ago

Nice solution . Great Job

jitendra kumar (Moderator) 2 years ago
Your Welcome

Reply

Şevval 2 years ago

I want to suggest a mail extension. For example, when you type sevval@g, it should complete as @gmail.com. How can I do that?

jitendra kumar (Moderator) 2 years ago
Hello,
Kindly contact us at [email protected]. So that we could assist you in a better way.
Thanks

Reply

AutoComplete TextField in Swift

Leave a Comment Cancel Reply

9 comments

Message Sent!