Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

timavo's avatar
Level 24

Vue.js: Custom search filter like multiple `LIKE` operators

I am trying to filter a set of users with Vue.js. The basic filterBy filter works fine so far, except it is searching for the exact string you enter.

HTML (with blade syntax):

<div id="wrapper">
    <div>
        <input type="text" v-model="search" class="form-control">
    </div>
    <div v-repeat="users | filterBy search in 'phone'">
        @{ name } | @{ phone }
    </div>
</div>

(The forum didn't display double mustaches so I removed one mustache in the HTML on name and phone.)

JavaScript:

new Vue({
    el: '#wrapper',

    data: {
        search:   '',
        users: [
            { name: 'Billy', phone: '555-123-4567' },
            { name: 'Jack',  phone: '999-123-4567' },
            { name: 'Beate', phone: '888-123-4567' },
            { name: 'Zorro', phone: '333-123-4567' },
            { name: 'Udo',   phone: '444-123-4567' }
        ]
    }
});

What I am looking for is a custom filter which functions more like the SQL LIKE operator with wildcards.

e.g. if I search for 333 4567, I want it to return the user Zorro. In SQL terms I would write something like LIKE %333% AND LIKE %4567%. How can I achieve this with JavaScript/Vue? Any help is very much appreciated.

0 likes
5 replies
timavo's avatar
Level 24

Thanks @topvillas! As I am new to JS, can you provide some more information or a link?

isanjayjoshi's avatar

try below code once if not work visit WrapPixel Blog for Vue Filter Once

Please or to participate in this conversation.