[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