【问题标题】:Angular autocomplete search角度自动完成搜索
【发布时间】:2021-02-05 01:48:33
【问题描述】:

我有一个下拉菜单,可以在其中获取一些 json 数据。我这样做是有角度的。所以这里我有一个名为 options 的列表,里面的数据是 json 格式。所以我必须在下拉列表中显示名称字段所以我的任务是对此下拉列表进行自动完成搜索。我已在此处附上我的stackblitz 链接。

【问题讨论】:

    标签: html angular typescript autocomplete angular-material


    【解决方案1】:

    解决了你的问题。

     return this.options.filter(option => option.name.toLowerCase().indexOf(filterValue) === 0);
    

    【讨论】:

    • @JoeRishwanth 在 autocomplete-filter-example.ts 文件中写上上面的代码,而不是你的 'option => option.name.toLowerCase().includes(filterValue)' 代码
    【解决方案2】:

    您需要将过滤方法修复为:

    
      private _filter(value: any): any {
        const filterValue = value.toLowerCase();
    
        return this.options.filter(option =>
          option.name.toLowerCase().includes(filterValue)
        );
      }
    

    这里是demo code

    【讨论】:

    • 我遇到了一个错误。 “_filter 已声明,但它的值从未被读取”
    • @JoeRishwanth:它被用于 ngOnInit map(value => this._filter(value)) 。帮我解决 stackblitz 上的这个错误。我没看到。
    • @JoeRishwanth:如果有效,您介意将其标记为答案吗
    【解决方案3】:

    您正在将一个对象与过滤器值进行比较。

    你的过滤器回调函数应该是这样的。

    option => option.name.toLowerCase().includes(filterValue)
    

    【讨论】:

    • 我猜它不起作用。您可以在此处发布更新或有效的 stackblitz 链接吗?
    • 因为 stackblitz 链接没有显示任何下拉菜单或搜索功能
    猜你喜欢
    • 2021-02-05
    • 2021-02-23
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-02-02
    • 1970-01-01
    • 2021-12-03
    相关资源
    最近更新 更多