Partial string match in array

Question

I have an array of objects containing some company data. I have already filtered the data based on if the user has selected a member type then I want to further filter the data by the company name. This has to be a partial match for example if the user enters 'Go' or 'go' the company Google would match. At moment I have it set up so it will only match the full name 'Google' for example.

Here's my code:

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>

Józef Podlecki · Accepted Answer · 2020-05-21 13:36:26Z

3

This has to be a partial match for example if the user enters 'Go' or 'go' the company Google would match.

Then you have to normalize data with toLowerCase() and use 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())
                    });
                }

answered May 21, 2020 at 13:36

Józef Podlecki

11.4k5 gold badges33 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Reece Over a year ago

This works perfectly thanks. But I thought includes only did exact matches? in the docs on the demo here developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… it returns false for a partial match. Does includes work differently inside .filter() ?

Józef Podlecki Over a year ago

You are looking at wrong prototype function method determines whether one string may be found within another string

Dave Newton Over a year ago

@Reece That's Array.includes, you want String.includes

Reece Over a year ago

Thanks guys that makes sense now

Collectives™ on Stack Overflow

Partial string match in array

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related