Filter a database query after 3 or more characters are entered

I am using this great feature, however I would like the search to start only when the user would have entered 3 or more characters in the search box; the table would display no rows before that. What is the best way to do that please?

You can try using the condition step in server connect and set: {{$_POST.yourinput.length >= 3}}
THEN > place your filtered query there
ELSE > nothing

On the page all remains the same.

1 Like

alternatively in App connect change the filter condition from

form.filter.value

to

form.filter.value.length>2?form.filter.value:'randonstringhere’

Sorry edited, misread question

That way a random text string would be send (assuming it doesn’t exist in the table) until more than 2 characters added

1 Like

I think you can make it even simpler by adding the condition in query builder, with no extra steps:

image
(I think the screenshots were made before this option was available in query builder.)

2 Likes

Keep forgetting about that box, nice one!
Edit
(would that stop the output when nothing or less than 3 chars added?)

You are right Tom, that’s a better solution :slight_smile:
The only issue is that the user says:

And this way they will see all records.

1 Like

That would disable the query condition however Elias wants no output before the three characters are entered, would that not then show the entire table when length was less than 3?

2 Likes

It’s a great feature - it makes query builder a lot more powerful.

Another feature to consider with searches like this (perhaps not in this case) is ‘Debounce’ - rather than specifying the number of characters before the first query is sent, specify a time delay, eg:

image

3 Likes

Yes, i agree debounce is really useful, i confess that was my first thought

Good point :slightly_smiling_face:

That’s what i love about Wappler, one question, so many ways of dealing with it which can be tweaked to suit the user.

4 Likes

Then i believe the condition step is what he needs, as the query will only be executed and filtered if length is >= 3

1 Like

Some great and easy solutions here.
You can also try this:
In server action’s GLOBAL > $_POST/GET > inputfilter variable > add a validation for min length to be 3.
This way the request will simply fail for less than 3 characters, and none of the steps will even get executed until this validation passes.

The debounce option is the quickest and good solution, but it would ultimately depend on what your requirement is.

Thank you all for your instantaneous replies. Indeed, if the condition is not true, it is showing all records

Thanks Sid, nice approach, however if i am entering more than 3 characters, then deleting 2, the table is not showing 0 entries as I would have liked it to

Have you tried my suggestion?

Yes, the only caveat is that instead of nothing I want to send back an empty row, is there a way of doing that in server connect without having to do a query with a random condition? Otherwise I will use the latter approach proposed by @Hyperbytes

Thanks @TomD for pointing this out. I have added it to my code

Do you mean an empty/static table row? If yes, in your table, you can add another table body after the one showing your dynamic data, using the dynamic attributes to show it when no data is returned from the query, the same as here, but apply it to the table body instead:

Actually I meant sending back an answer from the server that there are no rows i.e. this kind of message:

{“query2”:{“offset”:0,“limit”:10,“total”:0,“page”:{“offset”:{“first”:0,“prev”:0,“next”:0,“last”:-10},“current”:1,“total”:0},“data”:}}

Anyway I am currently doing a paged query with a condition that includes a random string which does the job

1 Like