Блог

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

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

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

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

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

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

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

Итак, мое решение — использовать 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 amp;amp; (charCode < 48 || charCode > 57)) {
      return false;
    }
    return true;
  }
  

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