[ASK][searchable-select] search and select items not working

[atmanegara]

ns 8.5.3
using javascript plain
my code
`
// xml file

<SS:SearchableSelect render="drop" items="{{ items_unit }}" hint="Please select some countries"
modal_title="Countries" search_param="name" primary_key="code" change="onSelect" />
`

[OPADA-Eng]

Hi
Can you please add js code for your view model.

[atmanegara]

Hi Can you please add js code for your view model.

`export function onNavigatedTo(args){
const page = args.object
GModel.list_data_unit('').then(function(data){

//items_unit = new ValueList(data);
contextItem.set('items_unit',data);
contextItem.set("itemsSelectedIndexUnit", undefined);

})
page.bindingContext = contextItem;

}`

response return data
[{ "code": "2", "name": "BADAN PENGELOLA PAJAK DAN RETRIBUSI DAERAH DAERAH" }, { "code": "3", "name": "BADAN PERENCANAAN PEMBANGUNAN, PENELITIAN DAN PENGEMBANGAN DAERAH" }, { "code": "4", "name": "BADAN KEPEGAWAIAN DAN PENGEMBANGAN SUMBER DAYA MANUSIA DAERAH" }, { "code": "5", "name": "BADAN PENANGGULANGAN BENCANA DAERAH" }, { "code": "6", "name": "BADAN PENGELOLAAN KEUANGAN DAN ASET DAERAH" }, { "code": "7", "name": "DINAS KESEHATAN" }, { "code": "8", "name": "DINAS PERDAGANGAN" }, { "code": "9", "name": "DINAS KEPEMUDAAN, OLAHRAGA DAN PARIWISATA" }, { "code": "10", "name": "DINAS SOSIAL, PENGENDALIAN PENDUDUK, KELUARGA BERENCANA, PEMBERDAYAAN PEREMPUAN, DAN PERLINDUNGAN ANAK" }, { "code": "11", "name": "DINAS PENDIDIKAN" }, { "code": "12", "name": "DINAS LINGKUNGAN HIDUP DAN PERHUBUNGAN" }, { "code": "13", "name": "DINAS KOMUNIKASI DAN INFORMATIKA" }, { "code": "14", "name": "DINAS KETAHANAN PANGAN DAN PERIKANAN" } }]

Screenrecorder-2023-05-31-23-53-03-336.mp4

this use render="drop", but
If you use the "render = label" tag, an error message appears when you click the dropdown

is there any example using plain javascript?

[OPADA-Eng]

I see the problem is you are not using the appropriate data type for the items data array
it should be ObservableArray data type.
That's the reason it breaks when you press on it.
try it this way:

GModel.list_data_unit('').then(function(data){

//items_unit = new ValueList(data);
contextItem.set('items_unit',new ObservableArray(data));
contextItem.set("itemsSelectedIndexUnit", undefined);

})

[atmanegara]

ok the error problem is resolved, only the search problem remains unresolved?

[OPADA-Eng]

Can you share the entire code so I can check the problem?

[atmanegara]

Can you share the entire code so I can check the problem?

this xml file

code

this is the data item

I don't know if there is still a property / function / additional code for "search"

[OPADA-Eng]

Where is the item_template?

[atmanegara]

in the example don't use item_template and I don't know that property

<Page xmlns:SS="@ticnat/nativescript-searchable-select"> <StackLayout> <SS:SearchableSelect items="{{ countries }}" hint="Please select some countries" modal_title="Countries" search_param="name" primary_key="code" change="{{ onSelect }}" /> </StackLayout> </Page>

[OPADA-Eng]

use this:

<SS:SearchableSelect render="label" selected="{{ selected }}" items="{{ countries }}" hint="Please select some countries" modal_title="Countries" search_param="name" primary_key="code" change="{{ onSelect }}">
          <SS:SearchableSelect.itemTemplate>
            <GridLayout class="item" height="50" columns="*,100">
              <Label col="0" class="text-center" text="{{ name }}" textWrap="true" />
              <Label col="1" class="text-center" text="{{ code }}" textWrap="true" />
            </GridLayout>
          </SS:SearchableSelect.itemTemplate>
        </SS:SearchableSelect>

[atmanegara]

use this:

<SS:SearchableSelect render="label" selected="{{ selected }}" items="{{ countries }}" hint="Please select some countries" modal_title="Countries" search_param="name" primary_key="code" change="{{ onSelect }}">
          <SS:SearchableSelect.itemTemplate>
            <GridLayout class="item" height="50" columns="*,100">
              <Label col="0" class="text-center" text="{{ name }}" textWrap="true" />
              <Label col="1" class="text-center" text="{{ code }}" textWrap="true" />
            </GridLayout>
          </SS:SearchableSelect.itemTemplate>
        </SS:SearchableSelect>

the same

Screenrecorder-2023-06-04-22-03-21-934.mp4