Angular 4 ElasticSearch example – simple Full Text Search

In the previous posts, we had know how to get All Documents in Index and show them with pagination. This tutorial show you way to implement a simple Full Text Search in an Angular 4 Application.

Related Post:
Angular 4 ElasticSearch – Quick Start – How to add Elasticsearch.js
Angular 4 ElasticSearch example – How to create an Index
Angular 4 ElasticSearch example – Add Document to Index
Angular 4 ElasticSearch example – Get All Documents in Index
Angular 4 ElasticSearch example – Documents Pagination with Scroll

Elasticsearch Tutorials:
Elasticsearch Overview
ElasticSearch Filter vs Query
ElasticSearch Full Text Queries – Basic

I. How to

1. Add ElasticSearch to Angular 4 Project

Please visit Angular 4 ElasticSearch – Quick Start – How to add Elasticsearch.js for details.

With the post, you will know how to:
– Install ElasticSearch
– Add ElasticSearch to Angular 4 Project
– Use it in the project

2. Create Index & Check Connection

Please visit Angular 4 ElasticSearch example – How to create an Index for details.

3. Simple Full Text Search

Using Client.search() function with match_phrase_prefix, we create a simple full text search function:

In the component to implement searching, we create html page that catch any key-up event in the text box:

And search() function:

To prevent hit the database after every keypress (it will make multiple queries to ElasticSearch), we implement a timeout by keeping track of the last keypress time, then update the subjects only if the last keypress was more than 100ms ago:

So, with query:

The result will be like:

II. Practice

0. Overview

Goal:
angular-4-elasticsearch-full-text-search-simple-goal

Project Structure:
angular-4-elasticsearch-full-text-search-simple-structure

1. App Module

2. ElasticSearch Service

3. Components
3.1 Add Document Component

Please visit: 3_Add_Document_Component for details.

3.2 Details Component

You can find it at: 3.2_Details_Component (in the previous post).

In this tutorial, we just modify code to hide age and published:

3.3 Show Documents Component

Please visit:
Show_Documents_Component
– or Show_Documents_Component with Pagination

3.4 Search Documents Component

search-customers.component.ts

search-customers.component.html

4. App Routing Module

app.component.html

5. Check Result

Run Angular 4 App, go to http://localhost:4200/, add Customer Data, then choose Search by Address tab:
angular-4-elasticsearch-full-text-search-simple-goal

III. Sourcecode

Angular4ElasticSearch-fulltext-search

By JavaSampleApproach | October 19, 2017.


Related Posts


Got Something To Say:

Your email address will not be published. Required fields are marked *

*