离子搜索栏中的离子显示数字键盘，但是当选择一个值时，显示名称和数字

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>

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

因此，使用此键，您只能提供输入数字，而当您选择它时，它将显示整个选择选项。 试试这个。