Как реализовать список данных с помощью mat-select of angular -material?

Question

Вот код исходного списка данных (выберите, у которого есть возможность индивидуального ввода):

<input type="text" list="selectCity" placeholder="select city" />
<data-list id="selectCity">
    <option [value]="New York" />
    <option [value]="London" />
    <option [value]="Paris" />
    <option [value]="Beijing" />
    <option [value]="Montreal" />
</data-list>

Я хочу создать что-то подобное через <mat-select>. Я видел несколько вопросов по этому поводу, но ответы были примерно такие: «вы можете сделать другой ввод, который принимает заданное значение ...», но в моем приложении я хочу помочь пользователю , чтобы получить город легко среди очень длинный список городов. так что это решение не может мне помочь. Я пробовал что-то с <mat-form-field> и <input>, но возникли некоторые проблемы ... Можете ли вы дать мне какое-нибудь эффективное решение для этого?

Answer 1

<mat-form-field appearance="fill">
    <mat-label>select city</mat-label>
      <mat-select>
        <mat-option value="option">New York</mat-option>
        <mat-option value="option">London</mat-option>
        <mat-option value="option">Paris</mat-option>
      </mat-select>
</mat-form-field>

В этом примере вы можете ввести букву и перейти к первой опции, которая начинается с этой буквы. Это будет полезно, если варианты отсортированы в алфавитном порядке . Иначе см. Здесь: https://material.angular.io/components/autocomplete/examples