离子展示在离子搜索栏中的数字键盘，但选择值时显示旁边的名称

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="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>

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

所以，使用这个你只能提供输入数字，当你选择它时会显示整个选择选项。 试试这个。