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

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妨碍了搜索栏中的任何内容。

这是我正在寻找的理想结果

标签： javascripthtmlionic-frameworkionic3

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

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