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