Angular 6 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 6 Application.

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

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

Elasticsearch full text Search

Add ElasticSearch to Angular 6 Project

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

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

Add Document & Get All Documents in Index

– Add Document:
>> Please visit Angular 6 ElasticSearch example – Add Document to Index.

angular-6-elasticsearch-example-add-document-to-index-add-document

– Get All Documents:
>> Please visit Angular 6 ElasticSearch example – Get All Documents in Index.

angular-6-elasticsearch-example-show-documents-in-index-result

>> with Pagination: Angular 6 ElasticSearch example – Documents Pagination with Scroll

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:

Practice

0. Overview

Goal:

angular-6-elasticsearch-example-full-text-search-result

1. Generate Service & Components

Run cmd:
ng g s elasticsearch
ng g c customer/add-customer
ng g c customer/customer-details
ng g c customer/show-customers
ng g c customer/search-customers

=> Project Structure:

angular-6-elasticsearch-full-text-search-project-structure

2. App Module

app.module.ts

3. ElasticSearch Service

elasticsearch.service.ts

4. Components

customer/customer.interface.ts

4.1 Add Document Component

Please visit: 4_Add_Document_Component (in the previous post) for details.

4.2 Details Component

You can find it at: Details_Component.

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

4.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

5. App Routing Module

app-routing.module.ts

6. App Component

app.component.ts

app.component.html

7. Check Result

Run Angular 6 App, go to http://localhost:4200/, add Customer Data, then choose Search by Address tab:

angular-6-elasticsearch-example-full-text-search-result

Sourcecode

Angular6Elasticsearch-full-text-search

By grokonez | August 17, 2018.



Related Posts


Got Something To Say:

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

*