Name Picker Malfunction

    nativescript-autocomplete-x
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.4 • Public • Published

    [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

    Install

    npm i nativescript-autocomplete-x

    DownloadsWeekly Downloads

    13

    Version

    0.0.4

    License

    MIT

    Unpacked Size

    37.8 kB

    Total Files

    30

    Last publish

    Collaborators

    • chrum