How to Enable Global Search like a Pro

Photo by Ian Usher on Unsplash

Global Search has become ubiquitous in web applications. Typical functionalities of the global search are :

• Do full-text search and yield results
• Provide filters for precise inclusion or exclusion
• Allow sorting the results based on specific attributes

From an end-user perspective, global search would be something like the following:

Global Search Samples

Searches can happen over

• Unstructured data like web content, emails, comments/reviews, etc.
• Structured data which has specific data-model like “Product with title, description, and other fields”, etc.

Choice of technology to do full-text search depends on several factors:

• Data volume
• The tradeoff between accurate results vs quick response
• Existing stack vs leeway to choose a new stack
• Multilingual support, etc.

Traditionally RDBMS provided only extensive filters and sorting capabilities. Search functionality was limited to some wild-card searches at best. Modern RDBMS bridged the gap by providing full-text search capabilities.

• PostgreSQL
• MySQL and so on

In addition to databases, many dedicated search engines are available

• Elasticsearch (Lucene) — Disk-based
• Redis Search — Memory-based and so on

Comparison of Redis Search vs Elasticsearch in terms of performance

An end-to-end solution based on Redis Search, Node.js, and Vue.js is chosen for this blog.

RediSearch

Instructions to run Redis Search (docker) server are provided in the training repo shared by RedisLabs. Sample dataset for Books is also included.

redislabs-training/ru203

Summary of the steps to start the server and load the sample is provided below:

// Start the Redis Server (Docker)
docker run -it --rm --name redis-search -p 6379:6379  redislabs/redisearch:2.0.5
// Clone the git repo and then load the sample data
gh repo clone redislabs-training/ru203
docker exec -i redis-search redis-cli < commands.redis > output.txt
// Start the redis-cli
docker exec -it redis-search redis-cli
// Create the books index
FT.CREATE books-idx ON HASH PREFIX 1 ru203:book:details: SCHEMA isbn TAG SORTABLE title TEXT WEIGHT 2.0 SORTABLE subtitle TEXT SORTABLE thumbnail TAG NOINDEX description TEXT SORTABLE published_year NUMERIC SORTABLE average_rating NUMERIC SORTABLE authors TEXT SORTABLE categories TAG SEPARATOR ";" author_ids TAG SEPARATOR ";"

RediSearch command to

• Search for keywords “dogs or cats”
• Filter by “categories”
• Sort the results based on “average_rating” in descending order
• Pick only the “title” field

FT.SEARCH books-idx "dogs|cats @categories:{Juvenile Fiction}" RETURN 1 title SORTBY average_rating DESC LIMIT 0 5

The same command can be executed in Node.js using the redis-modules-sdk client library:

RediSearch Client Code

Express API Server

Host a simple API app server, which exposes the RediSearch client module.

API app server

Global Search Vue Component

Vue component has been created using Tailwind CSS. Features included in the sample app are:

• Navbar with the Search component
• Input field to accept search keywords with debounce
• API request with cancel feature to avoid the rat race

Vue Global Search — tailwindcss

Code for the app is provided here. Code is simple and self-explanatory.

Conclusion

The “Global Search” concept is important. Frameworks, languages, and full-text search technology stack are replaceable with your favorites. Happy coding.

More content at plainenglish.io