Building a Mobile Search App with Appery.io Database, Part 2

Last week we put posted Building a Mobile Search App with Appery.io Database tutorial that shows you how to search a database for a particular search term. The way the search worked, is that the entire word has to be matched. For example, you could enter ‘Apple’ but not ‘Ap’ to search. In this post we are going to show you how to use a regular expression to get all objects that start with a particular letter. As for our data, are going to use US States.

Building the UI

To start, the UI that we need looks like this:

For input we use a search component
Below the input we have a grid, with one column and a label inside.

That’s all we need for the UI. Let’s now create the database.

Creating a database

Create a new database by going to https://appery.io.
Go to Collections tab and click Import button.
Upload States CSV file to the database. Once the collection is created, it should look like this:

That’s it for the database. Let’s now add a REST service to search this collection.

Adding a REST service

In Appery.io app builder, select Project > Create New > Database Services
Select your database
Expand States collection and check Query service.
Click import Selected services button. A query search for States collection will be created.
Let’s test the service. As we want to make the search a little bit more flexible, we are going to use a regular expression. For where param, enter the following:
```
{"States":{"$regex":"^C", "$options":"i"}}
```
The above will return all states that start with letter C or c. “$options”:”i” is what specifies the query to ignore the case.

We are done with the service. Let’s move on to mapping.

Mapping the service to the page

The input mapping looks like this:

This is JavaScript mapping:

return '{"States":{"$regex":"^'+value+'", "$options":"i"}}';

This is output mapping:

Invoking the service

The last thing we need to do is to invoke the service. Select the input search field, then Events > Add Event > Search. Add Action > Invoke Service, select the service instance.

Testing the app

To test the app, enter any letter, for example ‘n’ and click the magnifying glass inside the search input:

Blog