# InnerSearch
[![npm](https://img.shields.io/npm/v/innersearch.svg)](https://www.npmjs.com/package/innersearch)
[![npm](https://img.shields.io/npm/dm/innersearch.svg)](https://www.npmjs.com/package/innersearch)
[![coverage](https://img.shields.io/badge/coverage-90%25-green.svg)]()
[![Build Status](https://travis-ci.org/InnerSearch/InnerSearch.js.svg?branch=master)](https://travis-ci.org/InnerSearch/InnerSearch)
[![npm](https://img.shields.io/npm/l/innersearch.svg)]()

## What is InnerSearch ?
InnerSearch is a suite of UI components built with Vue.js for ElasticSearch

The aim is to rapidly create beautiful specified search applications using declarative components without being an ElasticSearch expert.

See full [Documentation](https://yinyanfr.gitbooks.io/innersearch-doc/content/)

## Quick Start

# Installing via NPM
```bash
$ npm install --save innersearch
```

## Quick Intro
[Live demo](https://yinyanfr.gitbooks.io/innersearch-doc/content/)
```javascript
   /*
        Simple way to use InnerSearch
    */

    import Vue from 'vue';
    import InnerSearch from "../innerSearch.js";
    import '../src/style.css';

    Vue.use(InnerSearch);

    window.addEventListener('load', function () {
        new Vue({
            el: '#defaultForm',

            created : function () {
                // ES server configuration
                this.setHost('http://es.yinyan.fr');
                this.setIndex('bank');
                this.setType('account');
            },

            template : `
                <section>
                    <h1 class='is-title'>innerSearch.js</h1>

                    <hr class='is-line' />

                    <div>
                        <refinement-list-filter :field="'state'" :title="'State : '" :size="20" :dynamic="true" orderKey="_count" orderDirection="asc" operator="OR"></refinement-list-filter>
                        <refinement-list-filter :field="'gender'" :size="100" :title="'Gender : '" :displayCount="true" operator="OR"></refinement-list-filter>
                    </div>

                    <div>
                        <searchbox :autofocus="true" :realtime="true" :timeout="200" :field="'firstname'" :placeholder="'Search by firstname'"></searchbox>

                        <search-datalist :realtime="true" :field="'lastname'" :suggestion="['firstname', 'lastname']">
                            <template slot="items" slot-scope="{ item }">
                                {{ item._source.firstname }} {{ item._source.lastname }} (<strong>{{ item._source.gender }}</strong>)
                            </template>

                            <template slot="nosuggestion" slot-scope="{ value }">
                                Sorry, "{{ value }}" doesn't exist... :(
                            </template>

                            <template slot="suggestions" slot-scope="{ suggestion }">
                                <span v-html="suggestion.highlight.firstname ? suggestion.highlight.firstname[0] : suggestion._source.firstname"></span>
                                <span v-html="suggestion.highlight.lastname ? suggestion.highlight.lastname[0] : suggestion._source.lastname"></span>
                            </template>
                        </search-datalist>

                        <search-button></search-button>
                        <reset-button></reset-button>
                    </div>

                    <hits>
                        <template slot="hits" slot-scope="{ hits }">
                            <div class="is-score is-hits">
                                <strong v-if="hits.score === 0">No result found</strong>
                                <strong v-else-if="hits.score === 1">1 result found</strong>
                                <strong v-else-if="hits.score > 1">{{ hits.score }} results found</strong>
                            </div>
                            <div v-for="item in hits.items" :item="item">
                                <div><strong>Identity (firstname, lastname) :</strong> {{ item._source.firstname }} {{ item._source.lastname }} ({{ item._source.state }}, {{ item._source.gender }})</div>
                            </div>
                        </template>
                    </hits>

                    <paginate :previousText="'Previous page'" :nextText="'Next page'" :size="10"></paginate>
                </section>
            `
        });
    });

    export default {};
```

See also [starter app](https://github.com/TrimA74/innerSearch-starter-app)