Make search in listview in sketchware | Searchbar in sketchware

So hello guys, 
I am here with a useful post for you all. Today I'm going to tell you how you can create a search box for your listview and when you enter something in that search box, the listview show only items similar to it.

Uses: 
1. Useful for a good user experience
2. Useful for large listview 
3. You can use for using labels and filter in list

So let's start creating our project 

Step 1: Create a project or use your old project.
Step 2: I'm assuming that you have created a new project so now add a listview and a edittext to it. (See the demo below)
Step 3: Create a custom view and link it to our listview.
Step 4: Now take any json data you want to use. (For showing you a demo I've created a demo json using chatgpt and containing key "name" and "email" and I used it in the project)
Step 5: Now go to OnCreate event or OnStart and load the data in listview and set the listview to the listmap and refresh listview (Very Easy I think -_-)

Variable: Add a custom number variable named as "d" as shown in picture
Step 6: Now here comes the real work of edittext. Come back to view screen and click on edittext and then select the on text changed property 
Step 7: Oops! I forgot to tell you you have to add the custom block before you do the step 6 

Link for cusotm block :-> 

Step 8: When you are inside the on text changed property add the custom block there.


Step 9: In the first space of custom block add the charseq variable you pick from main block. In second choose the listmap you are using to store the data and in third space add the key name in which you're going to search.

Step 10: Now add listview set custom data and listview refresh data to load the new data.


In this way you can easily add search bar to your listview and only in 10 Easy Steps.
 
Tip: If you want to add a clear button with edittext, It will be a nice decision. And the cusotm block work good if you add a clear edittext button. 

Thanks for reading the post. 
Previous Post Next Post