數組中的部分字符串匹配

Question

我有一個包含一些公司數據的對象數組。 我已經根據用戶是否選擇了成員類型來過濾數據，然后我想按公司名稱進一步過濾數據。 這必須是部分匹配，例如，如果用戶輸入“Go”或“go”，Google 將匹配公司。 目前我已經設置好了，所以它只會匹配全名“谷歌”。

這是我的代碼：

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

 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); } } } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="member_dir_search" class="dir-wrap"> <div class="dir-head"> <div class="dir-title"> <h4>Membership Classes:</h4> </div> <div class="filters"> <:-- these will be toggles --> <button v-on:click="setCompanyType('Full')" v-bind:class="{active: companyType === 'Full'}" > Full </button> <button v-on:click="setCompanyType('Market Practitioner')" v-bind:class="{active: companyType === 'Market Practitioner'}" > Market Practitioner </button> <button v-on:click="setCompanyType('Supplier')" v-bind:class="{active? companyType === 'Supplier'}" > Supplier </button> <.-- searchbar that autosuggests. --> <input type="text" placeholder="Search for a business..:" v-model:trim="searchString" v-on.input="companySearch"> </div> </div> <div class="dir-body"> <div class="dir-title"> <h4>Full Member Results</h4> </div> <div class="results"> <ul> <li v-for="company in companies"> <div class="company-name"> <h5>Company Name.</h5> <h6>{{ company.company_name }}</h6> </div> <div class="actions"> <div class="membership"> <p>{{ company.member_type }}</p> </div> <a href="#" class="btn bg green"> More... </a> </div> </li> </ul> </div> </div> </div>

Answer 1

這必須是部分匹配，例如，如果用戶輸入“Go”或“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())
                    });
                }