Question

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

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的tap事件添加了一个函数，并向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 ====

Answer 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];  
};

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

1 个答案: