Minimum character length before input

Hi Ben!

I’m using a live search implementation on the site I’m building and I’d like to have a minumum character length before triggering the sprig request.

A google shows me this SO answer: https://stackoverflow.com/questions/66301453/minimum-number-of-characters-before-hx-get

which says I can use hx-trigger="keyup[target.value.length > 10]" but when I try and implement this via this code:

<input sprig s-trigger="keyup[target.value.length > 3] changed[target.value.length > 3] delay:200ms" s-replace="#search-results" class="site-header__search-input" type="search" name="keywords" aria-label="Search" placeholder="Search products" value="{{ keywordSearch }}">

I can’t get Sprig to fire at all. I’ve tried just using keyup with no changed or delay but no dice. Am I barking up the wrong tree here? Do you have any ideas on what might be going wrong?

Thanks!

Robin

[bencroker]

This is a tricky one, since it throws the Sprig parser off, which takes the > to mean the end of the tag. I think I’m just going to recommend that you use a htmx attribute directly, which should work just fine.

<input sprig hx-trigger="keyup[target.value.length > 3] changed[target.value.length > 3] delay:200ms" s-replace="#search-results" class="site-header__search-input" type="search" name="keywords" aria-label="Search" placeholder="Search products" value="{{ keywordSearch }}">

[robzor]

Good idea, I’ll try there. Thanks again!