Ionic показать цифровую клавиатуру в ion-searchbar, но когда выбрано значение, показывать имя рядом с номером

Question

У меня есть компонент ion-searchbar с автозаполнением

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

Когда ионная поисковая панель сфокусирована, отображается только цифровая клавиатура.

Мне нужно искать по номеру, но показывать номер и текст в строке поиска, когда пользователь выбирает параметр из автозаполнения.

Однако, проверка HTML 5 type=number мешает, и ничего не отображается в строке поиска.

Это желаемый результат, который я ищу

Answer 1

Поскольку вы указали тип ввода = "число", то он покажет вам только номер,

Итак, мое решение - использовать type = "text", а затем использовать этот код

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>

ц

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

так, используя это, вы можете только указать номер входа, и при выборе он показывает всю опцию выбора. Попробуйте это.