Ion-select with Searchbar


#124

Hey, have a look at this demo:


#125

Thank you so much! It’s working!


#126

You are most welcome :wink:


#127

Hi I get this error:

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'setElementClass' of null

I followed all the installation instructions.
What Can be the problem?

$ ionic info

    @ionic/cli-utils  : 1.19.2
    ionic (Ionic CLI) : 3.20.0

global packages:

    cordova (Cordova CLI) : 8.0.0

local packages:

    @ionic/app-scripts : 3.1.10
    Cordova Platforms  : android 7.0.0 ios 4.5.4
    Ionic Framework    : ionic-angular 3.9.2

System:

    Android SDK Tools : 25.2.5
    Node              : v8.10.0
    npm               : 5.6.0
    OS                : Windows 10

Environment Variables:

Misc:

    backend : legacy

Here is my code

app.module.ts file:

...
import { SelectSearchableModule } from 'ionic-select-searchable';
...

  imports: [
    SelectSearchableModule  
  ]
...

register-business.module.ts file:

...
import { SelectSearchableModule } from 'ionic-select-searchable';

  imports: [
    SelectSearchableModule
  ],
...

register-business.ts file:

...
class Port {
  public id: number;
  public name: string;
}

@IonicPage()
@Component({
  selector: 'page-register-business',
  templateUrl: 'register-business.html',
})

export class RegisterBusinessPage {
  ports: Port[];
  port: Port;

  @ViewChild(Slides) slides: Slides;
  @ViewChild(Content) content: Content;


  constructor() {
...
    this.ports = [
      { id: 1, name: 'Tokai' },
      { id: 2, name: 'Vladivostok' },
      { id: 3, name: 'Navlakhi' }
    ];
...
  }
...
  portChange(event: {
    component: SelectSearchableComponent,
    value: any 
  }) {
    console.log('port:', event.value);
  }
...

register-business.html file:

...
  <ion-slides class="padding slide-shown-{{slideShownIndex}}" dir="rtl" pager="true" (ionSlideDidChange)="slideChanged()">

    <ion-slide class="register-business-data">
      <div class="register-wrapper">
        <div class="logo-wrapper set-top">
          <div class="top-title">
            <select-searchable item-content [(ngModel)]="port" [items]="ports" itemValueField="id" itemTextField="name" [canSearch]="true" (onChange)="portChange($event)">              
            </select-searchable>
          </div>    
        </div>
      </div>               
    </ion-slide>

  </ion-slides>
</ion-content>


#128

Hey, thanks for reporting a bug :+1: I fixed it in 2.7.4 release. Please, update:

npm i ionic-select-searchable@2.7.4

#129

Excellent tool, I’ve integrated it into my project - thank you for all your work.
I’ve used it to search for street names.
One thing our design department wants, is once a street is typed in, if it doesn’t exist they would like a search item to appear in the list that says “Create [search text]” (which can then be clicked to launch an event to add that list to the items…)

Using your product, would you recommend a way to implement this? The “create [search text]” item showing up, specifically.


#130

Hey, thanks :slight_smile:
Can you please submit an issue for the above here:

I have an idea about it and will look into it soon.


#131

I’ve got a new question regarding the UI for ion-searchable. So I was wanting to see if it was possible to add a button dynamically once the user selects the searchable element and it pops up.

Something like this, black box represents some type of button.
ion-searchable

Mainly a button that would update the list based on user location. I’m not sure if this is possible, and I know there are most likely different ways to do it. Any feedback would be greatly appreciated.


#132

hi @eakoriakin, i have tried to download your demo, but i cannot find components\select folder, can you help me?
thank you.


#133

Hey @elwanta, the project moved to github, checkout please https://github.com/eakoriakin/ionic-selectable for instructions on how to install and use the component.


#134

okay, thank you @eakoriakin


#135

Everything is there, thank you!


#136

sorry i dont get you


#137

im download but components folder not there