数组中的部分字符串匹配

时间:2020-05-21 13:31:48

标签: javascript vue.js

我有一个包含一些公司数据的对象数组。我已经根据用户是否选择了成员类型来过滤数据,然后我想通过公司名称进一步过滤数据。例如,如果用户输入Google将匹配的公司“ Go”或“ go”,则这必须是部分匹配。目前,我已经对其进行了设置,因此仅会匹配全名“ Google”。

这是我的代码:

https://jsfiddle.net/reece_dev/h3z2rxen/3/

<database name="mydb">
  <table name="scc_import">
    <column name="ItemId">000053</column>
    <column name="ItemName">Grüne Olivenpaste Arbequina</column>
    <column name="TaxCode">WDR</column>
    ... all other fields ...
  </table>
  ... all other nodes ...
</database>
const data = [
    {
        "company_name":"HP",
        "member_type":"Full"
    },
    {
        "company_name":"Microsoft",
        "member_type":"Full"
    },
    {
        "company_name":"Slack",
        "member_type":"Market Practitioner "
    },
    {
        "company_name":"Figma",
        "member_type":"Supplier"
    },
    {
        "company_name":"Google",
        "member_type":"Market Practitioner"
    },
    {
        "company_name":"Fyber",
        "member_type":"Full"
    },
    {
        "company_name":"Crunchyroll",
        "member_type":"Full"
    },
    {
        "company_name":"Sony",
        "member_type":"Supplier"
    },
    {
        "company_name":"Netflix",
        "member_type":"Supplier"
    },
    {
        "company_name":"Facebook",
        "member_type":"Supplier"
    },
    {
        "company_name":"Instagram",
        "member_type":"Market Practitioner"
    }
];


var app = new Vue({
    el: '#member_dir_search',
    data: {
        rawCompanies: data,
        companyType: '',
        searchString: '',
    },
    computed: {
        companies: function() {
            // if memberTypes is set filter the raw data by membership type
            if ( this.companyType !== '') {
                let filteredMembers = this.rawCompanies.filter(company => {
                    return company.member_type === this.companyType
                });

                if (this.searchString.length > 1 ) {
                    filteredMembers = filteredMembers.filter(company => {
                        return company.company_name === this.searchString
                    });
                }

                return filteredMembers;
            }else {
                return this.rawCompanies;
            }
        }
    },
    methods: {
        setCompanyType(type) {
            // if the selected type is already selected unset companyType else set companyType
            if (type === this.companyType) {
                this.companyType = '';
            } else {
                this.companyType = type;
            }
        },
        companySearch() {
            // if string is at lease two characters long minus white space
            if (this.searchString.length > 1 ) {

                console.log(this.searchString);
            }
        }
    }
});

1 个答案:

答案 0 :(得分:2)

例如,如果用户输入“ Go”或 “去” Google将匹配的公司。

然后,您必须使用toLowerCase()规范化数据并使用includes

   let filteredMembers = this.rawCompanies.filter(company => {
                    return company.member_type.toLowerCase().includes(this.companyType.toLowerCase())
                });

                if (this.searchString.length > 1 ) {
                    filteredMembers = filteredMembers.filter(company => {
                        return company.company_name.toLowerCase().includes(this.searchString.toLowerCase())
                    });
                }