Javascript 离子在离子搜索栏中显示数字键盘，但当选择一个值时，在数字旁边显示名称

我有一个带有自动完成功能的离子搜索栏组件

<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

遇到了障碍，搜索栏中没有显示任何内容

这是我想要的结果

---

因为您输入了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;
  }

isNumberKey（evt）{
evt=（evt）？evt:window.event；
var charCode=（evt.which）？evt.which:evt.keyCode；
如果（字符码>31&（字符码<48 | |字符码>57））{
返回false；
}
返回true；
}

所以，使用此选项，您只能给出输入编号，当您选择时，它将显示整个选择选项。

---

试试这个。

因为您已经输入了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;
  }

isNumberKey（evt）{
evt=（evt）？evt:window.event；
var charCode=（evt.which）？evt.which:evt.keyCode；
如果（字符码>31&（字符码<48 | |字符码>57））{
返回false；
}
返回true；
}

所以，使用此选项，您只能给出输入编号，当您选择时，它将显示整个选择选项。

---

试试这个。

对不起，我的问题可能不清楚，我需要数字键盘，但我需要在搜索栏中显示文本和数字。您是否使用type=“tel”？对不起，我的问题可能不清楚，我需要数字键盘，但我需要在搜索栏中显示文本和数字您是否使用type=“tel”？