nativescript-autocomplete-x
NativeScript autocomplete plugin
npm i --save nativescript-autocomplete-x

[WORK - IN - PROGRESS ]

[ only iOS so far ]

nativescript-autocomplete-x

nativescript-autocomplete-x is a NativeScript plugin for autocompleting (suggesting) text field content

On iOS

we are using: SearchTextField or actually my sweet fork ;)

On Android

that is not available yet

Demo apps

NativeScript-Core (XML)

Check out the demo folder. This is how to clone and run it:

git clone https://github.com/chrum/nativescript-autocomplete-x
cd nativescript-autocomplete-x/src
npm run demo.ios

NativeScript-Angular

Check out the demo-angular folder. This is how to clone and run it:

git clone https://github.com/chrum/nativescript-autocomplete-x
cd nativescript-autocomplete-x/src
npm run demo-angular.ios

Installation

tns plugin add nativescript-autocomplete-x

Usage

Core

IMPORTANT !!! Make sure you include xmlns:acx="nativescript-autocomplete-x" on the Page element

<Page class="page" xmlns:acx="nativescript-autocomplete-x">
<StackLayout>
<acx:AutocompleteX placeholder="check autocomplete..."
currentTextInResultsPrefix="Use: "
items="{{ ['First', 'Second', 'Third'] }}"
selected="onSelected">
</acx:AutocompleteX>
</StackLayout>
</Page>

Angular

Include AutocompleteXModule in your @NgModule
IMPORTANT !!! you need to do it for every module that will be autocompleting things ;)

import { AutocompleteXModule } from 'nativescript-autocomplete-x/angular';

@NgModule({
imports: [
AutocompleteXModule,
...
],
...
})
<AutocompleteX [placeholder]="'Placeholder...'"
[items]="items"
[currentTextInResultsPrefix]="'Use: '"
(selected)="onSelected($event)">

</AutocompleteX>

API [ TODO ]

Properties

Property Default Type Description
text string Gets or sets the text
items [ ] Array<string> array with strings that should be used as autocomplete source
hint string Placeholder
editable false boolean
currentTextInResultsPrefix string If set then typed text will appear as the first item on the suggestions list prefixed with this value.

Example
if this one is set to 'Use:'
then first item on the suggestions list will be 'Use: {typed text}'

Events

Property Type Description
selected (args: { text: string}): void fired when selected suggestion gets tapped

Troubleshooting

iOS

TODO

  • Android support
  • expose clear button mode
  • font configuration
  • theming, bg color
  • more compatibility features with {N} TextField

Authors

Chrystian Ruminowicz

License

This project is licensed under the MIT license