vue innersearch

InnerSearch: компоненты Vue.js для ElasticSearch.

Что такое внутренний поиск?

Проект с открытым исходным кодом, созданный, чтобы помочь разработчикам, работающим с vue.js и Elastic, дать им возможность создавать пользовательские интерфейсы поиска в течение часа.

InnerSearch — это набор компонентов пользовательского интерфейса, таких как SearchBox, RefinementListFilter, Paginator и многих других, созданных с помощью Vue.js.

Цель состоит в том, чтобы быстро создавать красивые заданные интерфейсы поиска с использованием декларативных компонентов, не будучи при этом экспертом по ElasticSearch и Vue.js.

Благодаря реквизитам компонентов и функциям слотов из Vue.js компоненты легко настраиваются.

Пример пользовательского интерфейса с InnerSearch:

Соответствующий код:

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

Быстрый старт

Оформить заказ Стартовое приложение внутреннего поиска Стартовое приложение

Посмотреть полную документацию

Установка через NPM

$ npm install --save vue-innersearch

Использование тега <script>

Для работы vue-innersearch нужны Vue и Vuex

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

Посмотрите, как использовать автономную сборку UMD в нашем примере Jsbin.

Краткое введение

Живая демонстрация

Лицензия