vue-searchbox

Lightweight searchbox component for Vue

Usage no npm install needed!

<script type="module">
  import vueSearchbox from 'https://cdn.skypack.dev/vue-searchbox';
</script>

README

searchbase
Vue Searchbox

A lightweight vue search library with some common utilities.

TOC

  1. Intro
  2. Features
  3. Usage
  4. Installation
  5. Docs Manual
  6. Contributing
  7. Other Projects You Might Like

1. Intro

Vue SearchBox offers a lightweight (~22KB: Minified + Gzipped) and performance focused searchbox UI component to query and display results from your ElasticSearch app (aka index) using declarative props. It is an alternative to using the DataSearch component from Vue ReactiveSearch.

⬆ Back to Top

2. Features

  • Design search experiences with best practices
  • Customize your components at will
  • Follow Vue principles

⬆ Back to Top

3. Usage

Basic Usage

<vue-searchBox
  app="good-books-ds"
  credentials="nY6NNTZZ6:27b76b9f-18ea-456c-bc5e-3a5263ebc63d"
  :dataField="['original_title', 'original_title.search']"
/>

Usage With All Props

<vue-searchBox
  app="good-books-ds"
  credentials="nY6NNTZZ6:27b76b9f-18ea-456c-bc5e-3a5263ebc63d"
  :dataField="[
        { field: 'original_title', weight: 1 },
        { field: 'original_title.search', weight: 3 },
    ]"
  title="Search"
  defaultValue="Songwriting"
  placeholder="Search for books"
  :autosuggest="true"
  :defaultSuggestions="[
        { label: 'Songwriting', value: 'Songwriting' },
        { label: 'Musicians', value: 'Musicians' },
    ]"
  :highlight="true"
  highlightField="group_city"
  queryFormat="or"
  fuzziness="AUTO"
  :showClear="true"
  :showVoiceSearch="true"
/>

⬆ Back to Top

4. Installation

npm install vue-searchbox
# or
yarn add vue-searchbox

⬆ Back to Top

5. Docs Manual

The official docs for the library are at docs/vue-searchbox

⬆ Back to Top

6. Contributing

Please check the contribution guide

⬆ Back to Top

7. Other Projects You Might Like

  • dejavu allows viewing raw data within an appbase.io (or Elasticsearch) app. Soon to be released feature: An ability to import custom data from CSV and JSON files, along with a guided walkthrough on applying data mappings.

  • mirage ReactiveSearch components can be extended using custom Elasticsearch queries. For those new to Elasticsearch, Mirage provides an intuitive GUI for composing queries.

  • ReactiveSearch Dashboard All your Reactive Search related apps (created via interactive tutorial, shared by others, etc.) can be accessed from here.

  • ReactiveMaps is a similar project to Reactive Search that allows building realtime maps easily.

  • appbase-js While building search UIs is dandy with Reactive Search, you might also need to add some input forms. appbase-js comes in handy there.

⬆ Back to Top