Addresses.js

import React, { Component } from 'react';
import extend from 'lodash/extend';
import { SearchkitManager,SearchkitProvider,
  SearchBox, Pagination, HitsStats, NoHits, ViewSwitcherHits,
  Layout, TopBar, LayoutBody, LayoutResults,
  ActionBar, ActionBarRow, QueryAccessor} from 'searchkit';
import './index.css';

import {
    SearchkitAutosuggest, HierarchicalRefinementDatasource,
    FacetFilterDatasource, QuickHitsDatasource, SuggesterDatasource,
    SuggestQuerySource
} from "@searchkit/autosuggest"

const host = "/addresses";
const searchkit = new SearchkitManager(host);

const ListItem = (props)=> {
  const {bemBlocks, result} = props;
  const source = extend({}, result._source, result.highlight);
  const streetWithBuilding = `${source.street}, ${source.building}`;
  const fullAddressAndID = `${result._id} - ${source.full_address}`;
  return (
    <div className={bemBlocks.item().mix(bemBlocks.container("item"))} data-qa="hit">
      <div className={bemBlocks.item("details")}>
        <h3 className={bemBlocks.item("streetWithBuilding")} dangerouslySetInnerHTML={{__html:streetWithBuilding}}></h3>
        <div className={bemBlocks.item("city")} dangerouslySetInnerHTML={{__html:source.city}}></div>
        <div className={bemBlocks.item("full_address")} dangerouslySetInnerHTML={{__html:fullAddressAndID}}></div>
      </div>
    </div>
  )
};

class App extends Component {
  render() {
    return (
      <SearchkitProvider searchkit={searchkit}>
        <Layout>
          <TopBar>
            <div className="my-logo">Поиск v0.01</div>
            <SearchBox
                placeholder=" "
                autofocus={true}
                searchOnChange={true}
                // https://www.elastic.co/guide/en/elasticsearch/reference/2.0/query-dsl-query-string-query.html
                queryOptions={{
                  analyzer: "default",
                  default_operator: "AND",
                  minimum_should_match: 1
                }}
                prefixQueryFields={["city", "street^2", "building^3", "full_address^5"]}

            /><br/>
            <SearchkitAutosuggest
                placeholder=" "
                highlightFirst={true}
                autofocus={true}
                queryHandler={
                    searchkit.getAccessorByType(QueryAccessor)
                }
                sources={[
                    new SuggestQuerySource(),
                    new QuickHitsDatasource({
                        title: "Возможные варианты",
                        searchFields:['full_address'],
                        sourceFields:['full_address'],
                        onSelect:(item)=> {
                            return item._source.full_address
                        },
                        itemRenderer:(item)=>{
                            return <span>{item._source.full_address}</span>
                        },
                        size: 12
                    })
                ]}/>
          </TopBar>

          <LayoutBody>
            <LayoutResults>

              <ActionBar>
                <ActionBarRow>
                  <HitsStats translations={{
                    "hitstats.results_found": "{hitCount} адресов найдено"
                  }}/>
                </ActionBarRow>
              </ActionBar>

              <ViewSwitcherHits
                  hitsPerPage={10}
                  highlightFields={["city", "street", "building"]}
                  sourceFilter={["city", "street", "building", "full_address"]}
                  hitComponents={[
                    {key:"list", title:"List", itemComponent:ListItem}
                  ]}
                  scrollTo="body" />

              <NoHits suggestionsField="street" />

              <Pagination showNumbers={true} />

            </LayoutResults>

          </LayoutBody>
        </Layout>
      </SearchkitProvider>
    );
  }
}

export default App;