Back to Blog Home
← all posts

Get text completion with AutoCompleteTextView (Beta)

December 1, 2016 — by Nikolay Diyanov

In the era of mobile devices, most of the user interactions with the device happen without additional hardware keyboards involved. This is comfortable for mobility purposes. However, the software keyboard is not always your best typing friend. To address the loss of tactile keyboards, most software keyboards offer some means for predictive completion. 

Often, the application developer would like the application user to choose from a defined set of choices. For example, the choices may be a list of origin airports serviced by an airplane company, or possibly a list of your friends in a social app context. In this case, the AutoCompleteTextView for NativeScript will be your best friend. Let’s dive in a little deeper into the useful features that the control provides.

nativescript-autocomplete


Different suggest modes

The AutoCompleteTextView control provides three suggestion modes:
  • Suggest - you get a dropdown with a list of items to choose from, filtered according to the characters you’ve just entered
    nativescript-autocomplete-suggest
  • Append - based on what you’ve just typed, one item is suggested and the remaining text is appended to your input. Tapping the space key commits the choice
    nativescript-autocomplete-append
  • Suggest-Append - as you type, you get both a pre-filtered list of items to choose from and text appended to your input
    nativescript-autocomplete-suggestappend

Different completion modes

Two completion modes are supported:

  • StartsWith - you get suggestions that start with the text that you typed
    nativescript-autocomplete-startswith
  • Contains - you get suggestions that contain the text that you typed
    nativescript-autocomplete-contains


Tokens

When you have to select just one item (like an origin airport), you might prefer leaving the style of the selected text normal, as a plain text. However, when you have to select a few items at once, like when you want to deliver an e-mail to several recipients, you’d probably want to choose the Tokens mode.  This mode makes each selected item  appear as a token. Tokens are easily distinguished from other choices in the list. Also each token can be removed separately by tapping the built in X section of the token.
nativescript-autocomplete-tokens


How to get AutoCompleteTextView (Beta)?

You can get a free Trial of UI for NativeScript Pro which contains AutoCompleteTextView (Beta) from NPM or from Telerik.com.

More features coming soon in the official release due in mid-January. Stay tuned!