Wire:click on x amount of clicks

#1

Is there a way to fire the click event on the lets say 4th keystroke?

Trying to build a search that will consume an external api that have a limit if 4 characters.

#2

Hi,

Not totally sure this is what you wanted but you could attach an updated lifecycle hook and fire the event after a certain amount of characters.

    public $search = '';

    public function updatedSearch($value)

    {

        if (strlen($value) === 4) {

            // Whatever needs doing

        }

    }

Hopefully this is somewhat helpful.

#3

Hi & thanks Nigel,
My aim was to do it without a callback, but I used your suggestion and figured out a way. I used a preg_match, to set the conditions instead.
Kru-x

1 Like
#4

Alpine Js is your best friend alongside with livewire to make things more interactives.

AlpineJs version of what you want to do, without making a network request on each click

public $clicksLimits=4;

public function methodtoCall()
{
///logic
}

<div x-data={clickslimits:@entangle('clicksLimits'),clickCounter:0}>
<button x-on:click="clickCounter++;if(clickCounter==clickslimits) {clickCounter=0; $wire.methodtoCall();}">Click me</button>
</div>
2 Likes
#5

Thanks xtreme2020,

Know nothing about js, just trying to push through in php. But I will eventually get in to it to speed up things.

Kru-x

1 Like
#6

Try to learn Alpine js is really easy and quick to learn, will help you to achieve good UX with any web app and very little lines of code.

this the github repository

also livewire doc with alpine