描述：我用创建了一个下拉列表，其中包含项目列表和一个搜索字段。这样用户就可以搜索列表中的项目，而不是滚动下拉菜单中的大列表。并可以选择列表中的项目。
问题：当试图在搜索框中搜索列表项时。如果我想在搜索框中提供空格，而不是在文本框中提供空格，它会自动在选择下拉菜单中选择一个项。所以我无法在搜索框中使用空格搜索项。
下面是代码片段。
<mat-select>
<input class="searchBox" placeholder=" Search Here" (input)="searchText($event);">
<mat-option *ngFor="let each of listItems" [value]="each.name">
{{each.name}}
<mat-option>
</mat-select>当试图在搜索框中搜索列表项时。如果我想在搜索框中提供空格，而不是在文本框中提供空格，它会自动在选择下拉菜单中选择一个项目。所以我无法在搜索框中使用空格搜索项目。
我的要求是给空间也在搜索框中。
1条答案
按热度按时间ercv8c1e1#
好的，我知道你的问题了，我们可以使用
$event.stopPropagation()函数在搜索列中提供空间时停止选择一个项目。下面是代码片段的示例。
此行将解决您的问题
<input class="searchBox" placeholder=" Search Here" (keyup)="searchText($event);" (keydown)="$event.stopPropagation()">**（keydown）="$event.stopPropagation（）"**将禁用您描述的默认功能。