innersearch/vue-innersearch

:mag_right: UI components built with Vue.js for ElasticSearch

InnerSearch : Vue.js components for ElasticSearch

What is InnerSearch ?

An Open Source project created to help developers working with vue.js and Elastic, give them the possibility to create search UIs within the hour.

InnerSearch is a suite of UI components like SearchBox, RefinementListFilter, Paginator and many others to come built with Vue.js.

The aim is to rapidly create beautiful specified search interfaces using declarative components without being an ElasticSearch and Vue.js expert.

Thanks too component props and slot features from Vue.js, the components are easily customizable

An UI example buit with InnerSearch :

Corresponding code :

<div class="columns">
    <div class="column is-one-fifth">
        <div>
            <refinement-list-filter :field="'state'"></refinement-list-filter>
            <refinement-list-filter :field="'gender'"></refinement-list-filter>
        </div>
    </div>
    <div class="column">
        <div>
            <searchbox :field="'firstname'"></searchbox>
            <div style="margin: 20px auto;width: 90%">
                <search-button></search-button>
                <reset-button></reset-button>
            </div>
            <hits></hits>

            <paginate :previousText="'Previous page'" :nextText="'Next page'" :size="10"></paginate>
        </div>
     </div>
</div>

Quick Start

Checkout innersearch starter app starter app

See full Documentation

Installing via NPM

$ npm install --save vue-innersearch

Using as <script> tag

vue-innersearch needs Vue and Vuex to work

  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.0.1/vuex.min.js"></script>
  <script src="https://unpkg.com/[email protected]/vue-innersearch.min.js"></script>

Have a look at how to use the standalone UMD build in our Jsbin example

Quick Intro

Live demo

License

vue-innersearch's Issues

items error vuetify

Im using vuetify then when import vue-innerserach throw an error

The computed property "items" is already defined as a prop.

All my selects are crashed

<v-select :items="divisions" v-model="divisionSelected" label="División: " item-text="nombre" item-value="idDivision" @change="getTournaments" solo>

Searching for phrases that have spaces in them.

I've noticed that in the DataSearchlist component, when you try to search on a component that has a space in it -- say "Cedar Creek" -- then it returns "No results" in the dropdown, and the hits return everything in Elasticsearch. Is there a way to fix this? When I try the phrase with the simple Searchbox, it just returns no results.

RefinementListFilter bug : aggegations not updating when unchecking

Actual behavior :

• Check F gender
• Check CA State
• Uncheck F gender
  What we see :
  Count number of state aggragations that aren't checked equals 0 instead of their total count.

Expected behavior :
Count number should not be 0

regroup all the request made by RLF's components into one

requests are made by the RLF's components to get aggregations when the component is created

those request need to be regroup in only one request

[Question] How to set Authentication headers for Elastic Search URL in this.setHost?

How to set Authentication headers for Elastic Search URL in this.setHost?

Mon tuto et Pre-requite de notre project

le cours de mon tuto https://github.com/yinyanfr/InnerSearch.js/blob/master/Doc/js701.md

My tuto will NOT cover

• Connaissance de base de JavaScript ES5

My tuto will review

• Programming fonctionnel en JavaScript
• Asynchronisation en JavaScript

My tuto will cover

• JavaScript ES6
• npm et modules
• express
• mongodb
• socket.io (nouveau pour moi quand meme)
• react
• react native (nouveau pour moi quand meme)
• vue.js (nouveau pour moi quand meme)

RefinementListFilter bug updating aggregations

Actual Behavior :

• Check CA State
• Check M gender
  7 results found
  CT State has a doc_count == 16
• Check CT State
  18 results found
  CT State doc_count got updated to 11
  F Gender doc_count equals 10

Expected Behavior :

• Check CA State
• Check M gender
  7 results found
  CT State has a doc_count == 11
• Check CT State
  18 results found
  F Gender doc_count equals 15

Does it support elasticsearch 6?

I test the innerSearch-starter-app demo and it works very well. However, the demo server is running elasticsearch 5.x. When I run 6.x, I encountered following error in browser:

• Failed to load http://localhost:9200/bank/_doc/_search: Request header field Authorization is not allowed by Access-Control-Allow-Headers in preflight response.

When I roughly look into the source code, I am not able to fix it. I suspect it does not support 6.x.
FYI https://www.elastic.co/blog/strict-content-type-checking-for-elasticsearch-rest-requests

geo location based component

is there a plan to add an component for geolocation based serach ?

i supply lat/lon and look for the geo query api in the index with a given radius

problems with SSR rendering / nuxt

I can't seem to get vue-innersearch to work with nuxt.js or any other ssr framework such as express, do you have any pointers/suggestions on how I would accomplish that? (it works fine on client only side, but with ssr i get window is undefined)

default search

most of us are going to use the componets for a ecommerce or any other site possible as catalog replacement

what would be nice is if we could have a default serach query defined somewhere once the page loads

Programmatically add refinement

I am looking for a way of adding a refinement programmatically.

My use case is the following:
When someone visits /category/category1 I get a category_id.
I want to only display the entries that have this specific category_id. (which is an attribute on my index entries of course).

So when I set my host, index and type (using this.setHost, this.setIndex and this.setType) I also want to set a refinement (e.g. this.setRefinement('category_id', category_id) ) and only display those.

How would I go for achieving that?

remembering filters/values

how hard would it be if i say i need to store the last search / filters
somewhere even if i leave the current "site" and want to come back to the old results

Connect to API endpoints instead of directly to Elasticsearch

I'm not sure if I'm missing something, but it seems vue-innersearch can only be used if an Elasticsearch server is available to the public. Suffice it to say that there are obvious, prohibitive drawbacks to doing this in production:

Note:
Is it safe to expose the Elasticsearch Search API directly through your application's API?
https://stackoverflow.com/questions/39103547/is-it-safe-to-expose-the-elasticsearch-search-api-directly-through-your-applicat

Can InnerSearch can be configured otherwise? If so where can we find an example?

[Question] Is there any CDN link?

Is there any CDN JS link to directly use this in HTML project?