Ion-select with Searchbar

Hi @eakoriakin Thanks for add-on,
I need your help to integrate singel dimensional array in place of ports model.
E.g
Temparray =[“a”,“b”,“c”];

Hey @darpit, I added support for plain arrays like ['Vladivostok', 'San Antonio']. Have a look at the very end of the demo. Here is a git commit as well.

Is there an “easy” AJAX-possibility to get e.g. suggestions of the Instagram user search directly?
Nice work there!

Hi @felix9607, hmm, I’ve never worked with Instagram API. However, if you manage to get data from Instagram with Angular 2 Http, then, certainly, this data can be used with Select component.

1 Like

Hey!
Today I used your lovely component for another purpose.
everything works fine now, when I could resolve all issues with this thread here. :slight_smile:

But I have small question:
I don’t really understand what These two are for:

itemValueField="property1" 
itemTextField="property2"

Ok, the second one is the displayed text on the select-page (can I Show more values per line there? like: )

itemTextField="property1"+", "+"property2" 

But im not sure about the 2nd one. what it does and so on.

Can you please give me a Little Explanation :slight_smile:

Hi @felix9607, for example, giving an array of ports

[{
  id: 1,
  name: 'Tokai'
}, {
  id: 4,
  name: 'Brake'
}]

The first itemValueField parameter is used to uniquely define each item in the list and is used to determine which item is selected. It’s basicaly an id of item. In this case it should be set as itemValueField="‘id’". It might be any other unique field as well.

The second parameter itemTextField is what you want to see in the list for this item. It can be port name itemTextField="‘name’", for instance.

If you need to display something more complex for item you can use itemTemplate function which executes for each item and returns a value you want to see in the list. Have a look at “With a custom template for items” paragraph in demo.

1 Like

Thank you very much! This worked very well.

My last question is now, is it possible to search for the template’s value and not only for one specifique property of the items? or maybe for multiple propertys…? :slight_smile:

Yes it is, you can search by any property. Have a look at searchPorts function in pages\home.ts file in Plunker demo. The sample below simulates AJAX, but you can just filter the array of items by removing setTimeout.

    searchPorts(event: { component: SelectSearchable, text: string }) {
        let text = (event.text || '').trim().toLowerCase();

        if (!text) {
            event.component.items = [];
            return;
        } else if (event.text.length < 3) {
            return;
        }

        event.component.isSearching = true;

        // Simulate AJAX.
        setTimeout(() => {
            event.component.items = this.getPorts().filter(port => {
                return port.name.toLowerCase().indexOf(text) !== -1 ||
                    port.country.toLowerCase().indexOf(text) !== -1;
            });

            event.component.isSearching = false;
        }, 2000);
    }
<select-searchable
    ...
    (onSearch)="searchPorts($event)"
    ...>
</select-searchable>
1 Like

Perfect :slight_smile:

But somehow it shows 0 items, if searchText == '' :worried:

If searchText is empty than there’s no need to filter the array and you can just return all items, I suppose, right?

yes of Course, but somethings seems to be buggy for me.

EDIT: See your plunkr at ‘custom templates’ it’s exact the same like mine.

I figured out, that the function [onSearch] is’t called, if the searchbar is empty. Maybe that’s why…

Yes, it’s called each time the user changes search text. Even if the user clears the text completely, the onSearch function will be triggered, but with an empty text.

User might as well type just white spaces, so there’s a check for this scenario at the beginning of the search function:

let text = (event.text || '').trim().toLowerCase();

Yes,now how to Show all items, if the searchbar is empty? :thinking: this is sadly the only Scenario where it’s emty at the beginning but only this Scenario fits for me :worried: tried so much already but nothing really worked

Do you get your items from the server or do you have all of the items located statically in code?

while Login i get them from Server via rest and save them locally.

later, before I call you search-select, I load them from the storage again and call the Array.

Edit It seems like I made a mistake, as I said it’s the same behavior like your plunkr’s ‘custom template’.
I meant ‘simulated Ajax search’ section!

But I Need to use this one, because I want to search for different properties of my items…

Okay, so you don’t need this ‘AJAX simulation’ as you load items only once and then just use it.
Here is how your search method might look like:

    ports: Port[];

    onInit() {
        // Here you get data from your storage.
        this.ports = yourStorage.getPorts();
    }

    searchPorts(event: { component: SelectSearchable, text: string }) {
        let text = (event.text || '').trim().toLowerCase();

        if (!text) {
            // If search text is empty, return all items.
            event.component.items = this.ports;
            return;
        } else if (event.text.length < 3) {
            // Don't search if the user types more then 3 characters.
            return;
        }

        event.component.isSearching = true;

        event.component.items = this.ports.filter(port => {
            // Search by two properties - name and country.
            return port.name.toLowerCase().indexOf(text) !== -1 ||
                port.country.toLowerCase().indexOf(text) !== -1;
        });

        event.component.isSearching = false;
    }

I tried sth similar already without success.

I think you don’t really see my issue.
I edited your plunkr: http://plnkr.co/edit/PmFJ2ND9Nhp11ecdzqTj?p=preview

I changed the searchPorts function like you did.
Try it out in the preview with der Ajax Simulation. Type ‘jap’ and tokio is displayed (that’s what I want too)
But you see, if the searchbar is empty…no ports are displayed.

The searchPorts function is simply not triggered if the searchbar is empty or gets deleted completely.

Okay, I got it :slight_smile: Try to search for ‘jap’ With Async Search (AJAX) in your demo. The one you are currently using With a custom template for items doesn’t have onSearch event applied to it.

I think we still didn’t ge each other :persevere:

This plunkr Shows exactly what I’m doing, (removed all other Options)
No misunderstandings possible.

I can search for different properties, which are also shown with a custom template.
BUT if (!text) then I can’t see any items, but in this case I want to see all.

Okay, I fixed it :slight_smile: Apply the following change and it should work for you - https://github.com/eakoriakin/select-searchable-demo/commit/27f5b2a8b2766d2581e4921f8b48422024ddf54b

1 Like