You might have seen search feature in many famous apps starting from social media apps like Facebook, Twitter, Instagram to e-commerce apps Amazon and Flipkart. Mostly the famous app uses the search feature for universal searching of contents. In Facebook you can search people, pages, post, places, etc.. In Amazon and Flipkart, you can search for different products in the different category.
Search allows your app user to reach your/their content very fast and with ease. If you are planning to implement this kind of search(Auto-completion way) feature in your app, you have to consider some basics points to improve the responsiveness of your search.
Mostly we will be talking from mobile app side(Some points may be applicable for web app also) and a little bit on the server side as well.
Mobile app side:
- You should decide searchable column in the database for your search operation. It could be a username, address, email ID, Country, or any project-specific fields/values. 🤔
- Based on the search column you need to configure input providing ways. If you are about to search only using alphabets you need to configure alphabet/default keyboard properly. You should not accept numbers or any special characters. ⌨️
- Before starting the search operation you need to format and validate search text accordingly. You should not hit API if the user adds unwanted special characters, space in search text.
- You should remove unwanted spaces, new lines at the starting and ending of the search text before hitting API.
- You should not hit API if the user is typing very fast. You need to have a time delay(say X seconds) between previous searched text and current searched text.
-
- iOS: One way of achieving this using configuring performSelector() with a delay of X seconds and whenever user types you need to cancel previously configured perform selector and configuring a new one. This code will go to your viewController.
-
// Cancel previously scheduled perform selector NSObject.cancelPreviousPerformRequests(withTarget: self, selector: #selector(handle(searchText:)), object: previouslySearchedText) // Schedule perform selector with latest search text perform(#selector(handle(searchText:)), with: previouslySearchedText, afterDelay: kMinimumTypingInterval)
- You need to cancel in-progress search API request(if any) before hitting API for current search text.
- Before hitting API you can do a local search in the array which you got in previous request to speed up search text highlighting process(Refer next point).
- When user search using search option you can highlight search text in results list if needed. Refer below image for search option in Amazon.
- If search text is cleared in the search field, you need to reset all local details like searched details array, locally filtered array, search text, in progress API request, etc…
- If previously searched text and new search text are same, you no need to hit API.
- Local search and server search should happen in a case-insensitive manner for alphabets.
- When searching against any column you need to analyse and handle special characters like $^*(), these type of special characters may cause an issue when highlighting search text in response.
- The user may search contents using emojis in iOS. You need to handle this as well. 👽
- If needed, you can add loading indicator at search bar without blocking the main UI. This should be handled in the worst case after optimising the API properly.
Server side:
- You need to analyse and form a JSON response structure as flat as possible rather than nested.
1. Flat JSON: (Simple and response time will be less)
{
“key_1”: “value”,
“key_2”: “value”,
“key_3”: “value”,
“key_4”: “value”
}
2. Nested JSON: (Complex and may take large response time than flat JSON)
{
“key_1”: “value”,
“key_2”: {
“key_1”: “value”,
“key_2”: “value”,
“key_3”: {
“key_1”: “value”,
“key_2”: “value”,
“key_3”: “value”,
“key_4”: {
“key_1”: “value”,
“key_2”: “value”,
“key_3”: {
“key_1”: “value”,
“key_2”: “value”,
“key_3”: “value”,
“key_4”: “value”
},
“key_4”: “value”
}
},
“key_4”: “value”
},
“key_3”: “value”,
“key_4”: “value”
}
- You need to have a minimum number of queries for fastening the search operation.
- API should not return entire matching records details in response JSON. Instead, you can return the record ID and other needed details like record name(Ask a question yourself like, do App need this actually before adding any column value in response?) to App. The app needs to hit another API to get the complete details about that particular record using its ID.
- You may need to use Postgres ILIKE query for this search operation based on the project requirement.
- You need to add indexing for a particular field you are about to search for to reduce the query time/execution time.
- You need to analyse and handle special characters like & in search text. If you have only & in search text then the query may not perform.
- You need to limit response counts in API. E.g If user types a letter “a” you should not return all records which have “a” in searchable field. The user just started to type so you can return only latest 20 or 30 records(Depends on project requirements) in response. While deciding this limit you need to analyse project requirement clearly and need to configure this limit based on it.
- You need to give high priority for the record which exactly matched a searchable field with search text. Next priority will go to records which matched the pattern in the searchable field. You can sort response based on this priority order. E.g Lets assume user searching another user by using his/her full name, Search text = John, response = [John(Exact match), John Appleseed(pattern match)].
Try to avoid showing loading indicator in your app when implementing this feature, because your user will expect search response as soon as possible. Instead of showing loading indicator try to optimise your API and query performance to speed up the search process. These are the basic points you may need to consider before implementing search/auto-completion feature in your app. If we missed any important point or scenario, please mention it in the comment box.
P.S: Featured Image courtesy – Appcelerator.com
–
Karthick S,
iOS Development Team,
Mallow Technologies.