AutoComplete TextFields 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 show 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 24 December 2019

. . .

9 comments

Jihoo Aug 6, 2020 at 6:14 pm

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

Rahul Jan 20, 2021 at 3:11 pm

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) Feb 1, 2021 at 9:52 am
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 Apr 20, 2021 at 3:09 am
Into your viewDidLoad() put this:
textField.autocapitalizationType = .allCharacters

Reply

Jonas Mar 23, 2021 at 8:27 am

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

Mahboob Jan 19, 2022 at 6:35 pm

Nice solution . Great Job

jitendra kumar (Moderator) Feb 9, 2022 at 2:14 pm
Your Welcome

Reply

Şevval Feb 16, 2022 at 11:38 am

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

jitendra kumar (Moderator) Apr 13, 2022 at 2:44 pm
Hello,
Kindly contact us at [email protected]. So that we could assist you in a better way.
Thanks

Reply

AutoComplete TextFields in Swift

Leave a Comment Cancel Reply

9 comments

Message Sent!