如何从 RadAutoCompleteTextView 获取所选项目的索引？答案

【问题标题】：How to get index of selected item from RadAutoCompleteTextView?如何从 RadAutoCompleteTextView 获取所选项目的索引？
【发布时间】：2019-04-29 03:32:27
【问题描述】：

所以我已经安装了自动完成插件：

tns plugin add nativescript-ui-autocomplete

并在我的 XML 中添加了视图：

<Page xmlns="http://schemas.nativescript.org/tns.xsd" 
xmlns:au="nativescript-ui-autocomplete" loaded="pageLoaded" class="page">
<StackLayout class="p-20">
    <au:RadAutoCompleteTextView id="autoComplete" items="{{ items }}" suggestMode="Suggest" displayMode="Token">
        <au:RadAutoCompleteTextView.suggestionView>
            <au:SuggestionView suggestionViewHeight="300">
                <au:SuggestionView.suggestionItemTemplate>
                    <StackLayout tap="{{tokenSelected}}">
                        <Label text="{{ text }}" />
                    </StackLayout>
                </au:SuggestionView.suggestionItemTemplate>
            </au:SuggestionView>
        </au:RadAutoCompleteTextView.suggestionView>
    </au:RadAutoCompleteTextView>
</StackLayout>

我还在建议的 stacklayout 的点击事件中添加了一个函数，并将项目添加到 RadAutoCompleteTextView：

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;

    const persons = ["Sjoerd Pottuit", "Sjoerd Pottuit", "David Lamp", "Ryan Tulp"];

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

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

function tokenSelected(args) {
    //how to know which Sjoerd Pottuit is selected?
    const person = args.view.bindingContext.text;
    console.dir(args);
    console.log(person); // returns: JS: Sjoerd Pottuit
};

问题是 tokenSelected 函数不返回所选项目的索引，并且 RadAutoCompleteTextView 只接受 TokenModel 类型的对象，这些对象只能包含要显示为搜索结果的文本和图像。

我想要索引，这样我就可以从另一个数组中从选定的人那里获取更多数据。

console.dir(args);返回：

JS: ==== object dump start ====

JS: type: "1"
JS: view: StackLayout(10)@file:///app/main-page.xml:8:25;
JS: android: MotionEvent { action=ACTION_UP, actionButton=0, id[0]=0, x[0]=230.0, y[0]=44.0, toolType[0]=TOOL_TYPE_FINGER, buttonState=0, metaState=0, flags=0x0, edgeFlags=0x0, pointerCount=1, historySize=0, eventTime=617931691, downTime=617931598, deviceId=3, source=0x1002 }
JS: ios: "undefined"
JS: object: StackLayout(10)@file:///app/main-page.xml:8:25;
JS: eventName: "tap"

JS: ==== object dump end ====

【问题讨论】：

标签： javascript nativescript

【解决方案1】：

我通过将这段代码添加到我的 pageLoaded 函数中，在 RadAutoCompleteTextView 的 itemLoading 事件中向项目的包装器添加了一个 ID：

const autoComplete = page.getViewById("autoComplete");
autoComplete.on("itemLoading", (args) => {
    const stackLayout = args.view;
    stackLayout.id = args.index;
});

这样，我可以通过在我的 tokenSelected 函数 (args.view.id) 中检索所选视图的 id 来获取索引。我会将此索引用于另一个数组，其中包含有关所选人员的更多数据。

function tokenSelected(args) {
    const person = page.bindingContext.personData[args.view.id];  
};

【讨论】：