Question

我使用mat-autocomplete过滤数据。一切正常，但是我想有一个下拉箭头以显示输入中的所有选项。在md-autocomplete中，我们可以使用 dropdown-arrow =“ true” ，但在mat-autocomplete中则不支持。那么，如何在mat-autocomplete中添加下拉箭头？这是我的@Configuration @EnableTransactionManagement @EnableJpaRepositories(basePackages="xxx.xxx.xxxx.module2", entityManagerFactoryRef="common-factory",transactionManagerRef="common-tx") @PropertySource(value = {"classpath:common-${spring.profiles.active}.properties"}) @Profile({"development","production","qa"}) public class JPAConfig2 { @Value("${common.jndi.name}") private String jndiName; @Value("${common.hibernate.dialect}") private String hibernateDialect; @Value("${common.hibernate.show_sql}") private String showSql; @Value("${common.hibernate.format_sql}") private String formatSql; @Value("${common.hibernate.hbm2ddl.auto}") private String hiberanteUpdate; @Value("${common.javax.persistence.validation.mode}") private String hibernateValidation; @Bean(name="common-factory") public LocalContainerEntityManagerFactoryBean entityManagerFactory(@Qualifier("common-ds") DataSource dataSource) { LocalContainerEntityManagerFactoryBean em = new LocalContainerEntityManagerFactoryBean(); em.setDataSource(dataSource); em.setPackagesToScan(new String[] {"xxx.xxx.xxxx.module2"}); JpaVendorAdapter vendorAdapter = new HibernateJpaVendorAdapter(); em.setJpaVendorAdapter(vendorAdapter); em.setJpaProperties(jpaProperties()); em.setPersistenceUnitName("common"); return em; } @Bean("common-ds") public DataSource dataSource() throws NamingException { return (DataSource) new JndiTemplate().lookup(jndiName); } private Properties jpaProperties() { Properties properties = new Properties(); properties.setProperty("hibernate.dialect",hibernateDialect); properties.setProperty("hibernate.show_sql",showSql); properties.setProperty("hibernate.format_sql",formatSql); properties.setProperty("hibernate.hbm2ddl.auto",hiberanteUpdate); properties.setProperty("javax.persistence.validation.mode",hibernateValidation); return properties; } @Bean(name="common-tx") public PlatformTransactionManager transactionManager(@Qualifier("common-factory") EntityManagerFactory factory){ JpaTransactionManager transactionManager = new JpaTransactionManager(); transactionManager.setEntityManagerFactory(factory); return transactionManager; } }

component.ts

Answer 1

您可以在<input>控件之后添加mat-icon并提供一些样式来定位它，并确保使用position: absolute

<form class="example-form">
        <mat-form-field class="example-full-width">  

        <input type="text" aria-label="Number" matInput 
        [formControl]="myControl" [matAutocomplete]="auto4"
        [hidden]="loadWithFilters&&loadWithFilters.field==='IP'"> 

        <i class="material-icons align-arrow-right">arrow_drop_down</i>

        <mat-autocomplete #auto4="matAutocomplete" dropdown-arrow="true" 
        (optionSelected)="onFilterOptionSelected($event,'IP')" >  

        <mat-option *ngFor="let option of filteredIP | async" 
        [value]="option.key">
            {{option.value}}
        </mat-option>
       </mat-autocomplete>  
       </mat-form-field>
</form>

在CSS文件中

.align-arrow-right {
    position: absolute;
    right: 0; //change as per requirement
    top: 0; //change as per requirement
}

Answer 2

基本上，您要在mat-autocomplete上附加matInput，因此可以分别设置form-field的样式，然后在其上附加mat-autocomplete。

请参阅此stackblitz以获得完整的代码演示。

可以添加

form-field图标like this。

您的代码应如下所示-

<form class="example-form">
    <mat-form-field class="example-full-width">
        <input type="text" matInput [formControl]="myControl" [matAutocomplete]="auto4"/>
        <mat-icon matSuffix>keyboard_arrow_down</mat-icon>

        <mat-autocomplete autoActiveFirstOption #auto4="matAutocomplete" (optionSelected)="onFilterOptionSelected($event)" >
          <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
            {{option}}
          </mat-option>
        </mat-autocomplete>
    </mat-form-field>
</form>

Answer 3

使用FontAwesome（或任何其他图标库，只要您知道插入符号图标的代码即可），我仅使用以下CSS做到了这一点：

input + mat-autocomplete:after {
    content: "\f0d7";
    font-family: "FontAwesome";
    right: 0;
    bottom: 4px;
    position: absolute;
    color: dimgrey;
    pointer-events: none;
}

为增加效果，您可以添加以下规则以在下拉列表展开时向上切换箭头：

input[aria-expanded="true"] + mat-autocomplete:after {
    content: "\f0d8";
}

如果您不想使用图标库，则可以使用Unicode黑色向下指向三角形：https://www.compart.com/en/unicode/U+25BE

哦，您的目标浏览器需要支持同级CSS运算符。

Answer 4

只需改善Nakul的答案即可。输入后使用matSuffix创建mat-icon或span并绑定自动完成事件以隐藏/显示下拉箭头

<mat-form-field class="example-full-width">
       
<!-- Input -->
        <mat-label>Assignee</mat-label>
        <input
      type="text"
      matInput
      [formControl]="myControl"
      [matAutocomplete]="auto"/>

<!-- Mat-Icon or Span -->
        <mat-icon matSuffix>
            <button style="padding: 0; margin: 0; border: 0; background-color: transparent;">
             <span class="material-icons"
               matTooltip="Click to select an User">
               {{arrowIcon}}
             </span>
           </button>
        </mat-icon>

<!-- Auto Complete -->        
        <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn" (opened)="arrowIcon='arrow_drop_up'"
            (closed)="arrowIcon='arrow_drop_down'" (optionSelected)="arrowIcon='arrow_drop_down'">
            <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
                {{option.name}}
            </mat-option>
        </mat-autocomplete>
</mat-form-field>

在TypeScript file中声明变量arrowIcon，用于存储当前图标名称
在mat-icon内创建按钮，以在用户将鼠标悬停在箭头图标上时显示用户手而不是指针
利用(opened)，(closed)和(optionSelected)事件来更改下拉图标名称

这是工作中的StackBlitz演示

我如何在mat-autocomplete的输入中添加下拉箭头

4 个答案: