Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Implementing Auto-Complete With UITextField

DZone's Guide to

Implementing Auto-Complete With UITextField

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.

· Mobile Zone
Free Resource

Download this comprehensive Mobile Testing Reference Guide to help prioritize which mobile devices and OSs to test against, brought to you in partnership with Sauce Labs.

I recently wanted to add a Safari-like auto-complete feature to an iOS app I've been working on. Specifically, I wanted the app to proactively suggest a complete word based on some initial characters entered by the user, similar to how Safari suggests URLs based on the first few letters in a web address:

As in Safari, tapping Return would allow the user to confirm the suggestion.

Since this is not a feature that Apple provides "out of the box," I thought I would share the approach I took in case it is of interest to anyone.

In this example, the text field will suggest values for the user's favorite color:

As the user types, a list of options is consulted to determine which value to suggest. For example:

Suggestions are defined as an array of strings:

let suggestions = [ "red", "orange", "yellow", "green", "blue", "purple" ]

To handle user input, the view controller assigns itself as the text field's delegate and implements the textField(_:shouldChangeCharactersIn:replacementString:) method, as shown below:

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

This method simply invokes the following method, which searches the suggestion list for the first entry with a prefix matching the user's input. It then updates the text value with the identified suggestion and selects the remaining characters in the text field:

func autoCompleteText( in textField: UITextField, using string: String, suggestions: [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 = suggestions.filter {
      $0.hasPrefix(prefix)
     }
     if (matches.count > 0) {
      textField.text = matches[0]
      if let start = textField.position(from: textField.beginningOfDocument, offset: prefix.characters.count) {
       textField.selectedTextRange = textField.textRange(from: start, to: textField.endOfDocument) return true
      }
     }
    }
 return false
}

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

Finally, the controller implements the delegate's textFieldShouldReturn(_:) method to "confirm" the suggestion:

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

Note that the text field's autocapitalizationType and autocorrectionType properties were set to .none and .no, respectively. Disabling auto-capitalization ensures that the lookup logic will correctly identify matches, since all of the suggestions begin with lowercase letters. Turning off auto-correction ensures that iOS's built-in suggestion bar is not displayed, since suggestions will be made by the text field itself.

Hope you find it useful. For more ways to simplify iOS app development, please see my projects on GitHub:

  • MarkupKit - Declarative UI for iOS and tvOS
  • HTTP-RPC - Lightweight multi-platform REST

Analysts agree that a mix of emulators/simulators and real devices are necessary to optimize your mobile app testing - learn more in this white paper, brought to you in partnership with Sauce Labs.

Topics:
mobile ,ios ,mobile app development

Published at DZone with permission of Greg Brown, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}