CODEWITHSUNDEEP
laravelvue.jsfilteringuppercaselowercase
ageans
ageans

Reputation: 557

How to elimnate the effect of upper- and lower case in database filter - vue - laravel

I have written a filter function that filters by column. I noticed, that when a word is uppercase, it won't give the result if the word is in lowercase.

For example: I search the term Paper, I get all of the rows that contain the word Paper but I don't get the rows who contain paper.

I could say when I paste a word to filter, automatically make it lowercase but then I want to get the rows containing Paper. How can I resolve this?

How can I ignore the lower and uppercase in my filter? Thanks for the help.

html Part

<b-table class="col-sm-12 table-sm" show-empty striped hover stacked="md" tbody-tr-class="addPointer"
    :items="filter"
    :fields="fields"
    @filter="onFilter">

    <template slot="top-row" >
        <td v-for="field in Object.keys(fields)" :key="field.key">
            <input class="col-sm" v-if="Object.keys(filters).indexOf(field) !== -1" v-model="filters[field]" :placeholder="field">
        </td>
    </template>
    <template slot="name" slot-scope="row">
        {{row.item.name}}
    </template>
</b-table>

Function

data() {
   return {

        filters: {
                name:'',
        },
       }
     },
     computed:{ 
        filter () {
            const filter = this.datas.filter(value => {
                    String(value[key]).includes(this.filters[key]))
            })
            return filter.length > 0 ? filter : [
                {
                    name:'',
                }
            ]
        },

Upvotes: 1

Views: 1345

Answers (1)

mare96
mare96

Reputation: 3869

Try to call toLowerCase() on results from database and your input.

In your case: 

const filter = this.datas.filter(value => {
                    String(value[key].toLowerCase()).includes(this.filters[key].toLowerCase()))
            })

Upvotes: 2

Related Questions