A Demo webcomponent Implementation of Elastic Search UI ( App Search ) using Lit-Element
- Add the script to your head or body tag:
<script src="https://cdn.jsdelivr.net/npm/es-searchui-wc@0.0.3/dist/es-searchui-wc.js"></script>
- Add the component tags inside the body tag :
<search-provider config='{ "debug": true, "apiConnector": { "searchKey": "search-3493gera4z2iiew7gywtmfwy", "engineName": "huducu", "hostIdentifier": "host-x9sasu" }, "searchQuery": { "disjunctiveFacets": [ "actors", "genre", "director", "year" , "imdbrating" , "country" ], "facets": { "imdbrating": { "type": "range", "ranges": [ { "from": 0, "to": 2, "name": "0-2" }, { "from": 2, "to": 4, "name": "2-4" }, { "from": 4, "to": 6, "name": "4-6" }, { "from": 6, "to": 8, "name": "6-8" }, { "from": 8, "to": 10, "name": "8-10" } ] }, "actors": { "type": "value" }, "genre": { "type": "value" }, "director": { "type": "value" }, "year": { "type": "value" } } } }'> <search-layout> <template> <div class="col-6"> <div class="suiwc-card suiwc-card-default"> <div class="suiwc-card-body"> <div class="row"> <div class="col-4"> <img style="height:150px;width:100px" src="{{poster.raw}}" /> </div> <div class="col-8"> <div class="row"> <div class="col-12"> <b>{{title.raw}}</b> ( {{year.raw}} ) </div> <div class="col-12"> <span class="suiwc-divider"> {{rated.raw}} </span> <span class="suiwc-divider"> {{language.raw}} </span> <span class="suiwc-divider"> {{imdbrating.raw}} </span> </div> </div> </div> </div> </div> </div> </div> </template> </search-layout> </search-provider>
Thats it!!
The config attribute in search-provider will have the info about app-search.If you dont specify one it will use a default dataset. For example:
{
"debug": true,
"apiConnector": {
"searchKey": "search-3493gera4z2iiew7gywtmfwy",
"engineName": "huducu",
"hostIdentifier": "host-x9sasu"
},
"searchQuery": {
"disjunctiveFacets": [
"actors",
"genre",
"director",
"year",
"imdbrating",
"country"
],
"facets": {
"imdbrating": {
"type": "range",
"ranges": [
{
"from": 0,
"to": 2,
"name": "0-2"
},
{
"from": 2,
"to": 4,
"name": "2-4"
},
{
"from": 4,
"to": 6,
"name": "4-6"
},
{
"from": 6,
"to": 8,
"name": "6-8"
},
{
"from": 8,
"to": 10,
"name": "8-10"
}
]
},
"actors": {
"type": "value"
},
"genre": {
"type": "value"
},
"director": {
"type": "value"
},
"year": {
"type": "value"
}
}
}
}
The template used to render each result can be specified inside the search-layout tag.It uses mustache templating engine.
- Download dependencies
npm install
- Run in dev mode
npm run-script dev
- Build
npm run-script dist
- search-provider : Initialises the SearchDriver. All the tags under it will use this to get the driver
- search-layout : Renders the whole layout using other components.Needs to be always as a child under search-provider.
- search-facets : Renders the facets. Uses search-facet internally
- search-facet : Renders a single facet.
- search-results : Renders the results.Uses the innerhtml as a template
- search-clear-filters : Renders clear filters
- search-bar
- search-pagination