CODEWITHSUNDEEP
javascripthtmlionic-frameworkionic3
Saad
Saad

Reputation: 1221

Ionic show numeric keyboard in ion-searchbar but when a value is selected show name alongside number

I have an ion-searchbar component with autocomplete 

<ion-searchbar #searchBar
                no-padding
                class="search-bar"
                (ionInput)="getCustomers($event)"
                [showCancelButton]="true"
                [(ngModel)]="customer_text"
                [autocomplete]="on"
                (ionClear)="clearSearchBar()">
 </ion-searchbar>

enter image description here

When the ion-searchbar is focused only numeric keyboard shows up.

I need to search by number but show number and text in the searchbar when the user selects an option from autocomplete.

However The html 5 validation type=number gets in the way and nothing is displayed in the search bar.

This is the desired result I'm looking for enter image description here

Upvotes: 1

Views: 776

Answers (1)

Aniruddh Thakor
Aniruddh Thakor

Reputation: 1616

Because you have given a input type="number" then it will show you number only,

So, my solution is use type="text" and then use this code

html 

    <ion-searchbar #searchBar
                    no-padding
                    class="search-bar"
                    (keypress)=isNumberKey($event)
                    (ionInput)="getCustomers($event)"
                    [showCancelButton]="true"
                    [(ngModel)]="customer_text"
                    [autocomplete]="on"
                    (ionClear)="clearSearchBar()">
     </ion-searchbar>

ts

  isNumberKey(evt) {
    evt = (evt) ? evt : window.event;
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57)) {
      return false;
    }
    return true;
  }

so,using this you can only able to give input number and when you select it shows whole select option. Try this.

Upvotes: 0

Related Questions