Automatic search trigger when user stopped typing in Xamarin.Forms

Have you ever struggled to find the best way how to trigger a search in your app? Do you want your user to trigger it manually (f.e. via a button), or do you want to trigger a search automatically while your user is typing? But then again, you don’t want to trigger too many searches. How can you make this more efficient? In this blog I’ll tell you all about this and how to implement this in your Xamarin.Forms app.

Use case

When implementing a search functionality in your app, you’ll have to make a decision on when you want to execute your search logic. Do you want to automatically start searching (while your user is typing), or do you want your user to trigger the search manually (via a button click, or the search button on your device keyboard). When you choose the first option, you can execute your search logic while the user is typing. But then you’ll trigger your search on each text change? How can we make this more efficient? Could we somehow ‘guess’ when your user has stopped typing, so we can then trigger the search? And can we isolate this logic in to a re-usable piece of code we can easily use wherever we want it to work?

TextChanged event

If we are going to use the Xamarin.Forms SearchBar, we automatically get a SearchCommand we can use to trigger our search functionality. But then again, this only gets triggered when the user clicks on the search button on the device’s keyboard. If we want to trigger a search automatically, we should handle the TextChanged event. On every character that your user is typing (or removing), this event gets triggered. On each text change… That would cause too many search calls. And that’s not what we want.

User stopped typing

Ideally we would only want to trigger the actual search call, when the user has stopped typing his/hers search terms. How do we know that the user has finished typing? The problem is we can’t know for sure. But what is the best solution here? What if we wait for a certain time after the last text change that the user has made. If we, for example, wait for 1 second after the last text change made by the user. And then trigger the search call. We don’t execute too many search calls, and also start searching automatically without the user having to click a button. We just wait until he/she stops typing and then execute our search call. And if the user starts typing again, we wait again until he/she stops typing and then execute our search call again. But how could we implement this?

Implementation

We first implement the TextChanged event handler on our SearchBar or Entry element (both derive from InputView, which gives us the TextChanged event). On each TextChanged event, we start a Task that first waits for 1 second to execute and then executes the search call. If within this 1 second another TextChanged event is triggered, we cancel the previous Task and again start a new Task that first waits for 1 second to execute and then executes the search call. This way when the user stopped typing, the last started Task will finish waiting for 1 second, never gets canceled because no new TextChanged event has been triggered and then executes the search call. Sounds easy right, but how do we code this?

Xamarin.Forms Behavior

Now we have a solution to implement an automatic search trigger that only gets triggered when our user has stopped typing! But when we want to re-use this, we should make this more generic. We could implement this logic in a Xamarin.Forms Behavior, so we could use this easily on each SearchBar or Entry element we have in our app. Like so:

As you’ve might noticed in above code sample, is that I’ve implemented 2 more options on the UserStoppedTypingBehavior. First one is StoppedTypingThreshold. This is the amount of milliseconds the behavior lets the user change it search terms, before executing the actual search call. The second one is AutoDismissKeyboard. After executing the search call, you can now choose to dismiss the device’s keyboard after the search call has been executed, or to leave it open so the user can quickly adjust his/hers search terms for another search.

Sample

I’ve recorded a short screen capture to show you how the UserStoppedTypingBehavior works and which options you can configure it with.

Of course the full source code and sample app is available for you on my GitHub: https://github.com/jBijsterboschNL/Xamarin.Forms-UserStoppedTypingBehavior.

Let me know what you think of it and if you would use this in any of your apps. You can reach out to me on LinkedIn, on the Xamarin Slack channel or simply by sending me an e-mail. I would love to here from you! Also if you are struggling with some Xamarin.Forms stuff, feel free to contact me.