深入了解 NativeScript UI 的 AutoCompleteTextView

作为移动开发者，我们的工作是为用户带来易用且引人入胜的移动体验 - 创建只需最少用户输入即可带来最大乐趣的应用程序。其中一部分意味着更少的打字，更少的点击，以及更快地完成任务。

希望您本周一直在关注我们对NativeScript UI 的深入了解。借助 NativeScript UI，我们尽最大努力帮助您创建这些引人入胜的体验，并创建用户**真正想要使用**的应用程序。

本文是我们“NativeScript UI 周”的一部分，涵盖了每个 NativeScript UI 组件的使用方法。今天的内容全部关于AutoCompleteTextView，我们将在后续文章中深入介绍我们提供的每个组件

ListView
Chart
SideDrawer
DataForm
AutoCompleteTextView
Calendar

什么是 NativeScript UI？

NativeScript UI 是一套用于使用NativeScript 框架编写的原生跨平台移动应用程序的高级 UI 组件。我们的目标是通过提供预构建、即用型且易于在您的应用程序中实现的组件（以及同样易于根据您的应用程序外观和风格进行样式设置）来简化 NativeScript 应用程序开发。

让我们开始学习有关 AutoCompleteTextView 组件的所有内容。

AutoCompleteTextView（又名 RadAutoCompleteTextView）

AutoCompleteTextView 组件（在代码中称为 RadAutoCompleteTextView）允许您为用户提供文本输入的自动完成功能 - 也许您正在过滤列表或提供多选输入的替代方案。

借助 RadAutoCompleteTextView 和一些 CSS，iOS 和 Android 上的此类输入场景变得更加轻松

AutoCompleteTextView example

使用 RadAutoCompleteTextView，您可以通过减少数据输入要求让用户掌控。您可以指定不同的文本建议模式，以及定义这些建议的显示方式。

安装 NativeScript UI 的 AutoComplete

导航到您的 NativeScript 项目目录，并使用以下命令安装 NativeScript UI AutoComplete（无需手动下载）

tns plugin add nativescript-ui-autocomplete

RadAutoCompleteTextView 入门

请注意，此处演示的所有代码都可在此 GitHub 存储库中找到。有关更多代码示例，请查看官方的NativeScript UI 示例存储库。

插件安装好了？太好了！现在我们需要在我们要使用 RadAutoCompleteTextView 的页面的根元素中添加一个 XML 命名空间。如果您对“XML 命名空间”感到害怕，请不要担心。您只需要向根<Page> 元素添加一个属性，如下所示

<Page xmlns:au="nativescript-ui-autocomplete">

最后，我们需要将 RadAutoCompleteTextView 组件添加到我们的 XML 标记中，如下所示

<Page xmlns:au="nativescript-ui-autocomplete">
    <au:RadAutoCompleteTextView id="myAutoComplete" />
</Page>

但这还不是全部！让我们连接一些数据，看看 RadAutoCompleteTextView 可以做什么。

AutoComplete 示例

让我们使用最少的代码运行 RadAutoCompleteTextView 组件。从我们的 XML 标记开始

<Page xmlns:au="nativescript-ui-autocomplete" xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded">

    <ActionBar title="RadAutoCompleteTextView Demo" class="action-bar" />

    <StackLayout class="stack-layout">
        <Label text="Artist:" class="label" />
        <au:RadAutoCompleteTextView items="{{ items }}" suggestMode="Append" displayMode="Token">
            <au:RadAutoCompleteTextView.suggestionView>
                <au:SuggestionView suggestionViewHeight="300">
                    <au:SuggestionView.suggestionItemTemplate>
                        <StackLayout>
                            <Label text="{{ text }}" />
                        </StackLayout>
                    </au:SuggestionView.suggestionItemTemplate>
                </au:SuggestionView>
            </au:RadAutoCompleteTextView.suggestionView>
        </au:RadAutoCompleteTextView>
    </StackLayout>

</Page>

我知道我们正在以约 3 秒的速度从 0 加速到 60，所以请耐心等待，我会逐步讲解此标记

我们向loaded 事件添加了一个pageLoaded 函数（见下文）。
我们插入了一个ActionBar 以在视图中显示标题。
我们添加了suggestMode 和displayMode 属性，我们将在后面讨论这些属性。
我们添加了一个<au:RadAutoCompleteTextView.suggestionView> 元素，这是一个花哨的名称，实际上是自动完成建议的占位符。

接下来，我们需要一些 JavaScript 代码来使这一切正常工作

var Observable = require("data/observable").Observable;
var ObservableArray = require("data/observable-array").ObservableArray;
var autocompleteModule = require("nativescript-ui/autocomplete");

var page;
var pageData = new Observable();
var items = new ObservableArray([]);

exports.pageLoaded = function(args) {
    page = args.object;
    page.bindingContext = pageData;

    var artists = ["Arcade Fire", "Bon Iver", "Daft Punk", "Elbow"];

    for (var i = 0; i < artists.length; i++) {
        items.push(new autocompleteModule.TokenModel(artists[i]));
    };

    pageData.set("items", items);
};

在此代码块中，我们有pageLoaded 函数，该函数在我们的主视图/页面加载时执行。在此函数中，我们遍历artists 数组并将项目添加到我们的items 可观察数组（这是我们用作自动完成的数据源）。

正在寻找 Angular 代码示例？请查看我们的Angular 完整文档！

所有这些都会产生以下结果

请注意，您看到的样式来自 NativeScript 中包含的核心浅色主题，以及使用NativeScript 主题构建器进行的一些自定义。

AutoComplete 建议模式

在上面的示例中，您可能注意到了suggestMode 属性，它具有以下选项

Suggest
Append
SuggestAppend

**Suggest**（默认选项）提供了一个下拉选项列表供您选择。**Append**（如上所述）提供第一个建议的内联显示。正如您可能猜到的那样，**SuggestAppend** 结合了这两者的功能。

suggest vs append

不同的显示选项

与在 Web 上使用单选按钮与复选框类似，RadAutoCompleteTextView 允许您在单个选项或多选选项之间进行选择。这是通过使用displayMode 属性实现的，该属性有两个选项

Plain
Tokens

**Plain**（默认显示选项）仅允许每个 RadAutoCompleteTextView 控件选择一个选项。另一方面，**Tokens**（如上所述）允许进行多个选择，并能够删除先前选择的项目。

plain vs token

自定义建议项模板

将自动完成选项显示为文本非常有用，但如果我们想稍微丰富一点，例如包含图像，该怎么办？这就是<au:RadAutoCompleteTextView.suggestionView> 元素中找到的项模板的作用。

首先，让我们将suggestMode 更改为suggestMode="Suggest"，以便获得完整的下拉体验以查看我们的图像。

接下来，让我们对我们的标记进行更改，并用以下内容替换我们现有的StackLayout 元素

<StackLayout orientation="horizontal" margin="5">
    <Image src="{{ image }}" width="50"/>
    <Label text="{{ text }}" marginLeft="10" />
</StackLayout>

最后，我们需要更改代码隐藏 JavaScript 中的数组和 for 循环，以便与文本一起传递图像

var artists = [
    {
        text: "Arcade Fire",
        image: "~/images/arcade-fire.png"
    },
    {
        text: "Bon Iver",
        image: "~/images/bon-iver.png"
    },
    {
        text: "Daft Punk",
        image: "~/images/daft-punk.png"
    },
    {
        text: "Elbow",
        image: "~/images/elbow.png"
    }
];

for (var i = 0; i < artists.length; i++) {
    items.push(new autocompleteModule.TokenModel(artists[i].text, artists[i].image));
};

所有这些都会产生更美观的 UI

image item template