ReactiveSearch Vue

https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart
Admin
A UI library providing components to build search experiences in Vue.js applications, integrating...
Tokens:607,715
Snippets:4,126
Trust Score:7.1
Update:1 year ago
Show doc for...
Tokens:
Raw
### Running ReactiveMaps Starter Project Locally

Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/react/v3/overview/reactivemaps

Provides a sequence of shell commands to clone the ReactiveMaps starter GitHub repository, navigate into it, install project dependencies using `yarn`, and start the development server to view the application locally.

```Shell
git clone https://github.com/appbaseio-apps/reactivemaps-starter
cd reactivemaps-starter
yarn && yarn start
# open http://localhost:3000 and you should see the app.
# The magic sauce is inside **src/App.js** file.
```

--------------------------------

### Install ReactiveSearch Library

Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/react/overview/quickstart

These commands demonstrate how to install the `@appbaseio/reactivesearch` npm package using either Yarn or npm, adding it as a dependency to your project for building search UIs.

```Bash
yarn add @appbaseio/reactivesearch
```

```Bash
npm install @appbaseio/reactivesearch
```

--------------------------------

### Install Flutter Project Dependencies

Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/flutter-searchbox/quickstart

This command fetches and installs all the declared dependencies in the `pubspec.yaml` file, making them available for use in the Flutter project.

```Shell
$ flutter pub get
```

--------------------------------

### Install react-searchbox using npm

Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/react-searchbox/quickstart

This command installs the `@appbaseio/react-searchbox` package using npm, the default package manager for Node.js. It adds the library to your project's dependencies.

```Shell
npm install @appbaseio/react-searchbox
```

--------------------------------

### Install Vue CLI globally using Yarn

Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/vue/overview/quickstart

This command installs the Vue CLI globally on your system, enabling you to create and manage Vue.js projects from the command line.

```bash
yarn global add @vue/cli
```

--------------------------------

### Example of `envs` Object with All Properties

Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/search/scripts/getting-started

This example illustrates a complete `envs` object, showcasing all available environment variables with sample values for various request contexts.

```JSON
{
	index: ["products"],
    category: 'reactivesearch',
    acl: 'reactivesearch',
    origin: 'https://my-search.domain.com',
    referer: 'https://my-search.domain.com/path?q=hello',
    ipv4: '29.120.12.12',
    ipv6: '2001:db8:3333:4444:5555:6666:7777:8888',
    query: "sneakers",
    type: "search",
    customEvents: { platform: 'mac' },
    filters: {"brand": "Puma"}
}
```

--------------------------------

### Install ReactiveSearch Module

Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/react/v3/overview/quickstart

These commands demonstrate how to install the `@appbaseio/reactivesearch` module, which is essential for integrating ReactiveSearch functionalities into your React application. You can choose either Yarn or npm based on your project's package manager preference.

```bash
yarn add @appbaseio/reactivesearch
```

```bash
npm install @appbaseio/reactivesearch
```

--------------------------------

### Install react-searchbox using yarn

Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/react-searchbox/quickstart

This command adds the `@appbaseio/react-searchbox` package as a dependency using yarn, an alternative package manager for JavaScript. It's often preferred for its speed and reliability.

```Shell
yarn add @appbaseio/react-searchbox
```

--------------------------------

### Install ReactiveMaps and ReactiveSearch Packages

Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/react/overview/reactivemaps

These commands install the core libraries required for building map-based search UIs: @appbaseio/reactivemaps and @appbaseio/reactivesearch. Both Yarn and npm installation methods are provided to integrate these modules into your project.

```Bash
yarn add @appbaseio/reactivemaps @appbaseio/reactivesearch
```

```Bash
npm install --save @appbaseio/reactivemaps @appbaseio/reactivesearch
```

--------------------------------

### Install ReactiveSearch Searchbox and SearchBase

Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/searchbox/quickstart

This snippet demonstrates how to install the `@appbaseio/searchbox` and its required dependency `@appbaseio/searchbase` using either npm or yarn. These packages are essential for building a search UI component that interacts with Elasticsearch.

```bash
npm install @appbaseio/searchbox @appbaseio/searchbase
// or
yarn add @appbaseio/searchbox @appbaseio/searchbase
```

--------------------------------

### Install Autocomplete Suggestions Plugin

Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/autocomplete-plugin/quickstart

Instructions for installing the necessary packages (`@algolia/autocomplete-js`, `@algolia/autocomplete-theme-classic`, and `@appbaseio/autocomplete-suggestions-plugin`) using either Yarn or npm.

```bash
yarn add @algolia/autocomplete-js && @algolia/autocomplete-theme-classic && @appbaseio/autocomplete-suggestions-plugin
```

```bash
npm install @algolia/autocomplete-js && @algolia/autocomplete-theme-classic && @appbaseio/autocomplete-suggestions-plugin
```

--------------------------------

### Install Searchbase Library with Yarn

Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/searchbase/overview/quickstart

This command installs the `@appbaseio/searchbase` package into your project using Yarn, a fast, reliable, and secure dependency management tool for JavaScript.

```Shell
yarn add @appbaseio/searchbase
```

--------------------------------

### Install ReactiveMaps and ReactiveSearch with NPM

Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/react/v3/overview/reactivemaps

This command installs the `@appbaseio/reactivemaps` and `@appbaseio/reactivesearch` packages using npm. The `--save` flag ensures that these dependencies are added to the project's `package.json` file.

```Bash
npm install --save @appbaseio/reactivemaps @appbaseio/reactivesearch
```

--------------------------------

### Create React App Boilerplate for ReactiveMaps

Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/react/overview/reactivemaps

This command initializes a new React application using Create React App, providing a clean boilerplate. It then navigates into the newly created project directory, preparing the environment for installing ReactiveSearch and ReactiveMaps components.

```Bash
create-react-app my-awesome-search && cd my-awesome-search
```

--------------------------------

### Install ReactiveMaps and ReactiveSearch with Yarn

Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/react/v3/overview/reactivemaps

This command installs the `@appbaseio/reactivemaps` and `@appbaseio/reactivesearch` packages using Yarn. These libraries are essential for integrating map components and search functionalities into a React application.

```Bash
yarn add @appbaseio/reactivemaps @appbaseio/reactivesearch
```

--------------------------------

### Create New Flutter Project

Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/flutter-searchbox/quickstart

This command initializes a new Flutter application, setting up the basic project structure and necessary files for development.

```Shell
flutter create flutter_searchbox_demo
```

--------------------------------

### Initialize React Application with Create React App

Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/react/overview/quickstart

This command creates a new React project boilerplate using Create React App and then navigates into the newly created project directory, preparing it for development.

```Bash
create-react-app my-awesome-search && cd my-awesome-search
```

--------------------------------

### Install ReactiveSearch Vue module

Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/vue/overview/quickstart

These commands add the `@appbaseio/reactivesearch-vue` package to your project's dependencies, allowing you to use ReactiveSearch components in your Vue.js application. Both Yarn and npm options are provided.

```bash
yarn add @appbaseio/reactivesearch-vue
```

```bash
npm install @appbaseio/reactivesearch-vue
```

--------------------------------

### Complete React Application with ReactiveSearch Components

Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/react/v3/overview/reactivemaps

Presents a comprehensive React application (`App.js`) integrating `ReactiveBase`, `SingleList`, and `ReactiveGoogleMap`. This snippet showcases the full setup, including imports, `ReactiveBase` configuration with URL, app name, credentials, and map key, and the layout of the filter and map components.

```JavaScript
import React, { Component } from 'react';
import { ReactiveBase, SingleList } from '@appbaseio/reactivesearch';
import { ReactiveGoogleMap } from '@appbaseio/reactivemaps;

import logo from './logo.svg';
import './App.css';

class App extends Component {
	render() {
		return (
			<ReactiveBase
				url="https://@appbase-demo-ansible-abxiydt-arc.searchbase.io"
				app="earthquake"
				credentials="a03a1cb71321:75b6603d-9456-4a5a-af6b-a487b309eb61"
				type="places"
				mapKey="<ADD YOUR GOOGLE MAPS KEY HERE>"
			>
				<div
					style={{
						width: '100%',
						display: 'flex',
						flexDirection: 'row',
						justifyContent: 'space-between',
					}}
				>
					<SingleList
						title="Places"
						componentId="places"
						dataField="place.raw"
						size={50}
						showSearch={true}
					/>

					<ReactiveGoogleMap
						componentId="map"
						dataField="location"
						react={{
							and: 'places',
						}}
						renderItem={result => ({
							label: result.mag,
						})}
					/>
				</div>
			</ReactiveBase>
		);
	}
}

export default App;
```

--------------------------------

### Install vue-searchbox Library

Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/vue-searchbox/quickstart

These commands demonstrate how to install the `vue-searchbox` library, which provides declarative props for querying Elasticsearch and binding UI components, using either npm or yarn package managers.

```bash
npm install @appbaseio/vue-searchbox
```

```bash
yarn add @appbaseio/vue-searchbox
```

--------------------------------

### Install ReactiveSearch Searchbox and Searchbase Libraries

Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/searchbox/Quickstart

This snippet provides the commands to install the necessary `@appbaseio/searchbox` and `@appbaseio/searchbase` npm packages, which are required for building search UIs with ReactiveSearch. `searchbase` is a framework-agnostic JS library providing common utilities for search queries.

```npm
npm install @appbaseio/searchbox @appbaseio/searchbase
```

```yarn
yarn add @appbaseio/searchbox @appbaseio/searchbase
```

--------------------------------

### Install react-native-searchbox using npm

Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/react-native-searchbox/quickstart

This command installs the `@appbaseio/react-native-searchbox` package, which provides declarative props for querying Elasticsearch and binding UI components. It's the standard way to add the library to your React Native project via npm.

```Shell
npm install @appbaseio/react-native-searchbox
```

--------------------------------

### Install Searchbase Library with Yarn

Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/searchbase/overview/QuickStart

This command demonstrates how to add the `@appbaseio/searchbase` package to your project using Yarn, a fast, reliable, and secure dependency management tool for JavaScript.

```Shell
yarn add @appbaseio/searchbase
```

--------------------------------

### Dart SearchController Initialization and Event Handling

Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/searchbase-dart/quickstart

This Dart example initializes the `SearchController` to connect to an Elasticsearch index, sets up data fields, and handles user input events. It demonstrates how to update the search value, trigger queries, and subscribe to state changes to render search results dynamically in the DOM.

```Dart
import 'dart:html';
import 'package:searchbase/searchbase.dart';

void main() {
  final index = 'gitxplore-app';
  final url = 'https://@arc-cluster-appbase-demo-6pjy6z.searchbase.io';
  final credentials = 'a03a1cb71321:75b6603d-9456-4a5a-af6b-a487b309eb61';
  // Instantiate the [SearchController]
  final searchController = SearchController(
      // Elasticsearch index name
      index,
      // Appbase URL
      url,
      // Appbase credentials
      credentials,
      // Unique identifier for search widget
      'search-widget',
      // Database fields to perform the search
      dataField: ['name', 'description', 'name.search', 'fullname', 'owner', 'topics'],
      // initial value
      value: ''
  );

  // Get the input element
  final searchElement = querySelector('#search');

  // Bind the searchController value to input value
  searchElement.value = searchController.value;

  // Update the search input value to searchController to fetch the results
  searchElement.addEventListener('input', (e) {
	// To fetch the suggestions based on the value changes
	searchController.setValue(e.target.value,
        options: Options(triggerDefaultQuery: true));
  });

  // Build DOM when search results update
  searchController.subscribeToStateChanges((change) {
		final results = change['results'].next;
		final resultsElement = querySelector('#results');
		resultsElement.innerHTML = '';
		results.data.forEach((element) {
			var node = document.createElement('li'); // Create a <li> node
			var resultNode = document.createTextNode(element.name); // Create a text node
			node.append(resultNode); // Append the text to <li>
			resultsElement.append(node);
		});
	},
	['results'],
 );

 // Fetch the default results at initial load
 searchController.triggerDefaultQuery();
}
```

--------------------------------

### Complete React Application with ReactiveBase, SingleList, and ReactiveGoogleMap

Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/react/overview/reactivemaps

This comprehensive code block demonstrates a full React application integrating ReactiveBase as the root component, along with SingleList for filtering and ReactiveGoogleMap for displaying search results. It shows the necessary imports, component structure, and prop configurations for a functional ReactiveSearch setup.

```JSX
import ReactDOM from "react-dom/client";
import { Component } from "react";
import { ReactiveBase, SingleList } from "@appbaseio/reactivesearch";
import { ReactiveGoogleMap } from "@appbaseio/reactivemaps";

class App extends Component {
  render() {
    return (
      <ReactiveBase
        app="earthquakes"
        url="https://a03a1cb71321:75b6603d-9456-4a5a-af6b-a487b309eb61@appbase-demo-ansible-abxiydt-arc.searchbase.io"
        enableAppbase
        mapKey="AIzaSyA9JzjtHeXg_C_hh_GdTBdLxREWdj3nsOU"
      >
        <div>
          <SingleList
            title="Places"
            componentId="places"
            dataField="place.keyword"
            size={50}
            showSearch
          />
          <hr />
          <div style={{ padding: "2rem" }}>
            <ReactiveGoogleMap
              style={{ height: "90vh" }}
              componentId="googleMap"
              dataField="location"
              defaultMapStyle="Light Monochrome"
              title="Reactive Maps"
              defaultZoom={3}
              size={50}
              react={{
                and: "places"
              }}
              onPopoverClick={(item) => <div>{item.place}</div>}
              showMapStyles={true}
              renderItem={(result) => ({
                custom: (
                  <div
                    style={{
                      background: "dodgerblue",
                      color: "#fff",
                      paddingLeft: 5,
                      paddingRight: 5,
                      borderRadius: 3,
                      padding: 10
                    }}
                  >
                    <i className="fas fa-globe-europe" />
                    &nbsp;{result.magnitude}
                  </div>
                )
              })}
            />
          </div>
        </div>
      </ReactiveBase>
    );
  }
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);
```

--------------------------------

### Create a new Vue project with Vue CLI

Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/vue/overview/quickstart

This command uses the Vue CLI to create a new Vue.js project named 'my-awesome-search' and then navigates into the newly created project directory. This sets up the basic project structure.

```bash
vue create my-awesome-search && cd my-awesome-search
```

--------------------------------

### Structuring ReactiveSearch Components with Flexbox Layout

Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/react/overview/quickstart

This example illustrates how to arrange ReactiveSearch components like `MultiList`, `SingleRange`, `SearchBox`, and `ReactiveList` within a flexible layout using CSS Flexbox, all wrapped by the `ReactiveBase` component for application-wide context.

```JSX
<ReactiveBase>
	<div style={{ display: "flex", flexDirection: "row" }}>
		<div style={{ display: "flex", flexDirection: "column", width: "30%", margin: "10px" }}>
			<MultiList/>
			<SingleRange/>
		</div>
		<div style={{ display: "flex", flexDirection: "column", width: "66%" }}>
			<SearchBox />
			<ReactiveList/>
		</div>
	</div>
</ReactiveBase>
```

--------------------------------

### Install react-native-searchbox using yarn

Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/react-native-searchbox/quickstart

This command adds the `@appbaseio/react-native-searchbox` package to your project using yarn. It serves as an alternative to npm for package management, offering similar functionality for integrating the library.

```Shell
yarn add @appbaseio/react-native-searchbox
```

--------------------------------

### Create React App Boilerplate

Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/react/v3/overview/reactivemaps

This command initializes a new React project using Create React App (CRA) with the specified name 'my-awesome-search' and then navigates into the newly created project directory. It sets up the basic structure for a React application.

```Bash
create-react-app my-awesome-search && cd my-awesome-search
```

--------------------------------

### Flutter Searchbox API Components Overview

Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/flutter-searchbox/quickstart

This section outlines the core API components available within the `flutter_searchbox` library, providing a high-level reference to its main building blocks for search UI development.

```APIDOC
API Reference:
  - SearchBaseProvider
  - SearchWidgetConnector
  - SearchBox
  - StateProvider
```

--------------------------------

### Example: Comprehensive SearchComponent Configuration

Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/searchbase/overview/searchcomponent

A detailed example showcasing a `SearchComponent` configured with a wide range of properties, including `appbaseConfig`, `headers`, `id`, `type`, `highlight`, `fuzziness`, `transformRequest`, `transformResponse`, and `beforeValueChange` with custom validation logic.

```JavaScript
const component = new SearchComponent({
    index: 'gitxplore-app',
    url: 'https://@arc-cluster-appbase-demo-6pjy6z.searchbase.io',
    credentials: 'a03a1cb71321:75b6603d-9456-4a5a-af6b-a487b309eb61',
    appbaseConfig: {
        recordAnalytics: true,
        enableQueryRules: true,
        userId: '[email\u00a0protected]',
        customEvents: {
            platform: "ios",
            device: "iphoneX"
        }
    },
    headers: {
        secret: "searchbase-is-awesome",
    },
    id: 'search-component',
    type: 'search',
    highlight: true,
    highlightFields: ["original_title", "original_title.raw"],
    value: "",
    fuzziness: "AUTO",
    searchOperators: true,
    queryFormat: "or",
    size: 10,
    from: 0,
    dataField: "original_title",
    includeFields: ["*"],
    excludeFields: [],
    sortBy: "asc",
    nestedField: "",
    transformRequest: (request) => Promise.resolve({
        ...request,
        credentials: "true"
    }),
    transformResponse: response => Promise.resolve({
        ...response,
        hits: {
            ...response.hits,
            hits: [
                {
                    _id: "promoted",
                    _source: {
                        original_title: "Harry potter and the cursed child"
                    }
                },
                ...response.hits
            ]
        }
    }),
    beforeValueChange:  value => new Promise((resolve, reject) => {
        if(/[^a-zA-Z0-9]/.test(value)) {
            resolve(value)
        } else {
            reject('Special characters not allowed.')
        }
    }),
})
```

--------------------------------

### Add Flutter Searchbox Library Dependencies

Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/flutter-searchbox/quickstart

This YAML configuration adds `flutter_searchbox` and `searchbase` as dependencies to your Flutter project's `pubspec.yaml` file, enabling their functionalities.

```YAML
dependencies:
  flutter_searchbox: ^4.0.0
  searchbase: ^4.0.0
```

--------------------------------

### DataSearch Component API Reference

Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/react/v3/overview/quickstart

DataSearch creates a searchbox UI component that queries on specified fields. It supports weighting fields for relevance and providing a placeholder.

```APIDOC
DataSearch:
  componentId: string (required) - A unique identifier for the component.
  dataField: array of objects (required) - Specifies the fields to search on with their respective weights.
    - field: string - The name of the field to search.
    - weight: number - The weight assigned to the field for relevance scoring.
  placeholder: string (optional) - Text displayed in the search input when empty.
```

--------------------------------

### ReactiveBase Component API Reference

Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/react/v3/overview/quickstart

ReactiveBase is a provider component that allows specifying the Elasticsearch index to connect to. It acts as the root component for all other ReactiveSearch components.

```APIDOC
ReactiveBase:
  url: string (required) - The URL of the Elasticsearch instance or appbase.io cluster.
  app: string (required) - The name of the Elasticsearch index or appbase.io app.
  credentials: string (optional) - Read-only credentials for the appbase.io app.
  enableAppbase: boolean (optional, default: true) - Set to false if connecting directly to an Elasticsearch service without using the appbase.io API gateway.
```

--------------------------------

### Full Configuration Example for ReactiveSearch SearchBox (React)

Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/react/v3/search/searchbox

Demonstrates a comprehensive usage of the ReactiveSearch `SearchBox` component, showcasing all available props and their typical configurations. This example includes data field weighting, UI customization, suggestion handling, and custom endpoint setup.

```JavaScript
    <SearchBox
        componentId="SearchBoxSensor"
        compoundClause="filter"
        dataField={[
            {
                "field": "group_venue",
                "weight": 1
            },
            {
                "field": "group_city",
                "weight": 3
            }
        ]}
        title="Search"
        mode="tag" // accepts either of 'select' or 'tag', defaults to 'select'
        defaultValue="Songwriting"
        placeholder="Search for cities or venues"
        autosuggest={true}
        highlight={true}
        highlightField="group_city"
        queryFormat="or"
        fuzziness={0}
        debounce={100}
        react={{
            and: ['CategoryFilter', 'SearchFilter'],
        }}
        size={10}
        showFilter={true}
        filterLabel="Venue filter"
        URLParams={false}
        enableRecentSuggestions={true}
        enablePopularSuggestions={true}
        enablePredictiveSuggestions={true}
        popularSuggestionsConfig={{
            size: 3,
            minHits: 2,
            minChars: 4,
            index: "" // optional index value to fetch recentsuggestions related to
        }}
        recentSuggestionsConfig={{
            size: 3,
            minChars: 4,
            index: "" // optional index value to fetch recentsuggestions related to
        }}
        applyStopwords={true}
        customStopwords={['be','or','hi']}
        onData = {({
            data,
            rawData,
            aggregationData,
            loading,
            error
        }) =>{
                // do something with the updated properties
        }}
        renderItem={(suggestion)=>{
            return <span>{suggestion.label}</span> // custom render every suggestion item in dropdown
        }}
        renderNoSuggestion="No suggestions found"
        endpoint={{
            url:"https://appbase-demo-ansible-abxiydt-arc.searchbase.io/recipes-demo/_reactivesearch.v3", //mandatory
            headers:{
                // relevant headers
            },
            method: 'POST'
        }}
    />
```

--------------------------------

### HTML Structure for SearchBase Components

Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/searchbase/overview/quickstart

This HTML snippet provides the basic DOM structure required for the JavaScript `SearchBase` example. It includes an input field for search queries, a div to display search results, and another div to render the language filter checkboxes.

```HTML
<input placeholder="type to search" id="search" />

<div id="results"></div>

<div id="language-filter"></div>
```

--------------------------------

### Vue Component Configuration Properties

Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/vue-searchbox/quickstart

This snippet illustrates common configuration properties for a Vue component, likely within a ReactiveSearch context. It defines settings for triggering default and custom queries, and enabling state change tracking.

```JavaScript
triggerDefaultQuery: false,
        triggerCustomQuery: true,
        stateChanges: true
```

--------------------------------

### Initialize React Project with Create React App

Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/react/v3/overview/quickstart

This command sets up a new React application boilerplate using Create React App and then changes the current directory to the newly created project. It's the first step in preparing your development environment for a ReactiveSearch integration.

```bash
create-react-app my-awesome-search && cd my-awesome-search
```

--------------------------------

### ReactiveGoogleMap Component Basic Configuration

Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/react/v3/overview/reactivemaps

Illustrates the basic JSX for a `ReactiveGoogleMap` component, including its `componentId`, the `dataField` for location data, and the `react` prop to establish a dependency on the 'places' component. It also shows the `renderItem` prop for custom marker rendering.

```JSX
<ReactiveGoogleMap
	componentId="map"
	dataField="location"
	react={{
		and: 'places',
	}}
	renderItem={result => ({
		label: result.mag,
	})}
/>
```

--------------------------------

### Including ReactiveMaps via UMD Script Tag

Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/react/v3/overview/reactivemaps

Demonstrates how to integrate the ReactiveMaps library into a web page directly using a `<script>` tag with a UMD (Universal Module Definition) build, suitable for environments without a Node.js build pipeline.

```HTML
<script src="https://cdn.rawgit.com/appbaseio/reactivesearch/dev/packages/maps/umd/reactivemaps.js"></script>
```

--------------------------------

### Example: Modify Response Body in `handleResponse` Script

Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/search/scripts/getting-started

This example illustrates how to use the `handleResponse` function to modify the Elasticsearch response body. It demonstrates adding a custom key-value pair to the response before it is returned.

```JavaScript
function handleResponse() {
        const responseBody = JSON.parse(context.response.body);
        return {
		    ...context.response,
            body: JSON.stringify({
                ...responseBody,
                custom_key: 'test'
            })
        }
    }
```

--------------------------------

### Register Search Component with Object Configuration

Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/searchbase/overview/searchbase

Example of registering a search component with `SearchBase` by providing an object to configure its properties. This method allows for quick setup of components without instantiating `SearchComponent` directly.

```javascript
const searchBase = new SearchBase({
	index: 'gitxplore-app',
	url: 'https://@arc-cluster-appbase-demo-6pjy6z.searchbase.io',
	credentials: 'a03a1cb71321:75b6603d-9456-4a5a-af6b-a487b309eb61'
});

searchBase.register('search-component', {
	dataField: ['title', 'description'],
	value: ''
});
```

--------------------------------

### Basic Vue App Root Styling

Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/vue-searchbox/quickstart

This CSS snippet provides fundamental styling for the root application element (`#app`) in a Vue project. It sets font properties, enables anti-aliasing, centers text, and defines the primary text color.

```CSS
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
```

--------------------------------

### HTML Markup for Search Input and Results Display

Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/searchbase-dart/quickstart

This HTML snippet defines the necessary DOM elements for the search functionality: an input field for user queries and a container `div` where search results will be dynamically rendered by the associated Dart code.

```HTML
<input placeholder="type to search" id="search" />

<div id="results"></div>
```

--------------------------------

### Example: Modify Request Body in `handleRequest` Script

Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/search/scripts/getting-started

This example demonstrates how to use the `handleRequest` function to modify the request body. It specifically shows how to add a filter for a brand name to the Elasticsearch query before the request is made.

```JavaScript
function handleRequest() {
        const requestBody = JSON.parse(context.request.body);
        return {
            ...context.request,
            body: JSON.stringify({
                ...requestBody,
                query: [
                    ...requestBody.query,
                    {
						id: 'brandFilter',
						execute: false,
						type: 'term',
						dataField: 'brand.keyword',
						value: 'Appbase'
					}
                ]
            })
        }
    }
```

--------------------------------

### Integrate ReactiveBase Component in React App

Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/react/v3/overview/reactivemaps

This React component snippet illustrates how to integrate the `ReactiveBase` component into your `src/App.js` file. `ReactiveBase` serves as the backend connector, allowing you to configure your Elasticsearch index, URL, credentials, and map key. The example uses an appbase.io setup for an 'earthquake' dataset, demonstrating basic configuration for connecting your ReactiveSearch application to an Elasticsearch backend.

```JavaScript
import React, { Component } from 'react';
import { ReactiveBase } from '@appbaseio/reactivesearch';

class App extends Component {
	render() {
		return (
			<ReactiveBase
				app="earthquake"
				url="https://@appbase-demo-ansible-abxiydt-arc.searchbase.io"
				credentials="a03a1cb71321:75b6603d-9456-4a5a-af6b-a487b309eb61"
				type="places"
				mapKey="<ADD YOUR GOOGLE MAPS KEY HERE>"
			>
				// other components will go here.
				<div>Hello ReactiveSearch!</div>
			</ReactiveBase>
		);
	}
}
```

--------------------------------

### Validate RangeInput Values with validateRange Callback

Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/react/v3/range/rangeinput

The `validateRange` prop is a callback function used to validate the input range values before they are applied. It accepts an array where the first element is the start range and the second is the end range. This example demonstrates how to prevent negative values for the start range.

```JSX
<RangeInput
    validateRange={[start, end] => {
        if(start < 0) {
            return false
        }
        return end
    }}
/>
```

--------------------------------

### Basic Usage of TabDataList Component in React

Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/react/list/tabdatalist

Demonstrates the fundamental setup of the `TabDataList` component, showing how to define its `componentId`, `dataField`, `title`, and the `data` array for populating the tabs. This example provides a minimal configuration to get the component running.

```jsx
<TabDataList
	componentId="MeetupTops"
	dataField="group.group_topics.topic_name_raw.raw"
	title="Meetups"
	data={[
		{
			label: 'Social',
			value: 'Social',
		},
		{
			label: 'Travel',
			value: 'Travel',
		},
		{
			label: 'Outdoors',
			value: 'Outdoors',
		},
	]}
/>
```

--------------------------------

### Customizing ReactiveGoogleMap Markers with renderItem Prop

Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/react/v3/overview/reactivemaps

Provides an example of the `renderItem` prop's callback function for `ReactiveGoogleMap`, demonstrating how to dynamically extract and display the 'mag' property from search results as a custom label for map markers.

```JavaScript
renderItem={(result) => ({
	label: result.mag
})}
```

--------------------------------

### Initialize SearchBase with Full Configuration

Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/searchbase/overview/searchbase

Demonstrates how to create a new `SearchBase` instance, configuring various properties like index, URL, credentials, analytics, custom events, request/response transformations, and custom headers. This example showcases a comprehensive setup for the search client.

```javascript
const searchbase = new SearchBase({
    index: "gitxplore-app",
    url: "https://@arc-cluster-appbase-demo-6pjy6z.searchbase.io",
    credentials: "a03a1cb71321:75b6603d-9456-4a5a-af6b-a487b309eb61",
    appbaseConfig: {
        recordAnalytics: true,
        enableQueryRules: true,
        userId: '[email protected]',
        customEvents: {
            platform: "ios",
            device: "iphoneX"
        }
    },
    headers: {
        secret: "searchbase-is-awesome"
    },
    transformRequest: (request) => Promise.resolve({
        ...request,
        credentials: "true"
    }),
    transformResponse: response => Promise.resolve({
        ...response,
        hits: {
            ...response.hits,
            hits: [
                {
                    _id: "promoted",
                    _source: {
                        original_title: "Harry potter and the cursed child"
                    }
                },
                ...response.hits
            ]
        }
    })
})
```

--------------------------------

### Vue SingleList Basic Usage Example

Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/vue/list/singlelist

Demonstrates the minimal setup for integrating the `SingleList` component into a Vue.js application. This snippet shows how to connect the component to a specific data field and assign a title.

```Vue
<template>
	<single-list componentId="CitySensor" dataField="group.group_city.raw" title="Cities" />
</template>
```

--------------------------------

### Flutter Searchbox API Reference Documentation

Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/flutter-searchbox/quickstart

This entry points to the comprehensive API documentation for the `flutter_searchbox` package. It serves as the authoritative source for understanding the library's classes, methods, properties, and usage patterns, essential for developers integrating search functionalities into their Flutter applications.

```APIDOC
External API Documentation for flutter_searchbox:
URL: https://pub.dev/documentation/flutter_searchbox/latest/

This documentation provides details on:
- Classes and their constructors
- Methods and their parameters, return types
- Properties and their types
- Usage examples and best practices for integrating search functionality.
```

--------------------------------

### Complete Flutter SearchBox and SearchBase Integration

Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/flutter-searchbox/quickstart

This code provides a full Flutter application demonstrating the integration of `flutter_searchbox` and `searchbase`. It initializes `SearchBaseProvider` with an `appbaseConfig`, sets up the main `MaterialApp`, and defines `HomePage` which includes an `AppBar` with a search icon to trigger `SearchBox` and a `SearchWidgetConnector` to display results. The `ResultsWidget` handles displaying search results and implements infinite scrolling/pagination.

```Dart
import 'package:flutter/material.dart';
import 'package:searchbase/searchbase.dart';
import 'package:searchbase/src/searchcontroller.dart' as searchbase;
import 'package:flutter_searchbox/flutter_searchbox.dart';

void main() {
  runApp(FlutterSearchBoxApp());
}

class FlutterSearchBoxApp extends StatelessWidget {
  final searchbaseInstance = SearchBase(
      'good-books-ds',
      'https://appbase-demo-ansible-abxiydt-arc.searchbase.io',
      'a03a1cb71321:75b6603d-9456-4a5a-af6b-a487b309eb61',
      appbaseConfig: AppbaseSettings(
          recordAnalytics: true,
          userId: 'test@dev'));

  FlutterSearchBoxApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SearchBaseProvider(
      searchbase: searchbaseInstance,
      child: MaterialApp(
        title: "SearchBox Demo",
        theme: ThemeData(
          primarySwatch: Colors.blue,
          visualDensity: VisualDensity.adaptivePlatformDensity,
        ),
        home: HomePage(),
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        actions: <Widget>[
          IconButton(
              icon: Icon(Icons.search),
              onPressed: () {
                showSearch(
                    context: context,
                    delegate: SearchBox(
                      id: 'search-widget',
                      enableRecentSearches: false,
                      enablePopularSuggestions: false,
                      showAutoFill: true,
                      maxPopularSuggestions: 3,
                      size: 10,
                      dataField: [
                        {'field': 'original_title', 'weight': 1},
                        {'field': 'original_title.search', 'weight': 3}
                      ],
                      distinctField: 'authors.keyword',
                      distinctFieldConfig: {
                        'inner_hits': {
                          'name': 'most_recent',
                          'size': 5,
                          'sort': [
                            {'timestamp': 'asc'}
                          ],
                        },
                        'max_concurrent_group_searches': 4,
                      },
                    ));
              }),
        ],
        title: Text('SearchBox Demo'),
      ),
      body: Center(
        child: SearchWidgetConnector(
            id: 'result-widget',
            dataField: 'original_title',
            react: {
              'and': ['search-widget'],
            },
            size: 10,
            triggerQueryOnInit: true,
            preserveResults: true,
            builder: (context, searchController) => ResultsWidget(searchController)),
      ),
    );
  }
}

class ResultsWidget extends StatelessWidget {
  final searchbase.SearchController searchController;  // Use the aliased class name
  ResultsWidget(this.searchController);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Card(
          child: Align(
            alignment: Alignment.centerLeft,
            child: Container(
              height: 20,
              padding: const EdgeInsets.only(left: 10.0),
              child: Text('${searchController.results.numberOfResults} results found in ${searchController.results.time.toString()} ms'),
            ),
          ),
        ),
        Expanded(
          child: ListView.builder(
            itemBuilder: (context, index) {
              WidgetsBinding.instance.addPostFrameCallback((_) {
                var offset = (searchController.from ?? 0) + (searchController.size ?? 0);
                if (index == offset - 1) {
                  if (searchController.results.numberOfResults > offset) {
                    searchController.setFrom(offset, options: Options(triggerDefaultQuery: true));
                  }
                }
              });

              return Container(
                  child: (index < searchController.results.data.length)
                      ? Container(
                          margin: const EdgeInsets.all(0.5),
                          padding: const EdgeInsets.fromLTRB(0, 15, 0, 0),
                          decoration: BoxDecoration(border: Border.all(color: Colors.black26)),
                          height: 200,
                          child: Row(
                            children: [
                              Expanded(
                                flex: 3,
                                child: Column(

```

--------------------------------

### Integrate ReactiveGoogleMap Component for Search Results

Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/react/overview/reactivemaps

This code shows the setup of a ReactiveGoogleMap component to display search results on a map. It uses `dataField` for location data, `react` to connect with other components (like SingleList), and `renderItem` for custom marker rendering.

```JSX
<ReactiveGoogleMap
  style={{ height: "90vh" }}
  componentId="googleMap"
  dataField="location"
  defaultMapStyle="Light Monochrome"
  title="Reactive Maps"
  defaultZoom={3}
  size={50}
  react={{
    and: "places"
  }}
  onPopoverClick={(item) => <div>{item.place}</div>}
  showMapStyles={true}
  renderItem={(result) => ({
    custom: (
      <div
        style={{
          background: "dodgerblue",
          color: "#fff",
          paddingLeft: 5,
          paddingRight: 5,
          borderRadius: 3,
          padding: 10
        }}
      >
        <i className="fas fa-globe-europe" />
        &nbsp;{result.magnitude}
      </div>
    )
  })}
/>
```

--------------------------------

### Configure queryFormat Property

Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/react/v3/list/tagcloud

sets whether to show results as a union with `"or"` (default) or an intersection with `"and"`. For example, if two tags are selected, say `"Guitars"` and `"Electric Guitars"` then with a `queryFormat` of `"or"` you would get results for both the tags. With a `queryFormat` of `"and"` you would get more specific results for guitars which satisfy both the tags.

```APIDOC
queryFormat:
  Type: String
  Optional: Yes
```

--------------------------------

### Include Searchbase UMD Build via CDN

Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/searchbase/overview/quickstart

These script tags allow you to include the Universal Module Definition (UMD) build of `@appbaseio/searchbase` directly from a Content Delivery Network (CDN). This method is suitable for browser-based applications where you want to quickly add the library without a build step.

```HTML
<script defer src="https://cdn.jsdelivr.net/npm/@appbaseio/[email protected]/dist/@appbaseio/searchbase.umd.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/@appbaseio/[email protected]/dist/@appbaseio/searchbase.umd.min.js.map"></script>
```

--------------------------------

### Integrate SingleRange Component for Ratings Filter (React)

Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/react/v3/overview/quickstart

The SingleRange component is used to create a ratings-based filter. It operates on a numeric data field, allowing specification of `start` and `end` ranges with associated `label` values via the `data` prop. The `defaultValue` prop can preselect a specific option, such as '4 stars and up'.

```JSX
<SingleRange
	componentId="ratingsfilter"
	dataField="average_rating"
	title="Filter by Ratings"
	data={[
		{ start: 4, end: 5, label: '4 stars and up' },
		{ start: 3, end: 5, label: '3 stars and up' },
	]}
	defaultValue="4 stars and up"
/>
```

--------------------------------

### JavaScript: Configure Appbase Client for Promoted Results

Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/autocomplete-plugin/quickstart

This JavaScript snippet demonstrates how to initialize the `appbaseClientConfig` object. It includes essential settings such as the Appbase.io URL, app name, credentials, user ID, and crucially, enables `enableQueryRules` for promoted results and `recordAnalytics` for usage tracking. This configuration is vital for integrating with Appbase.io's search services.

```javascript
// appbase client config object
const appbaseClientConfig = {
    url: "https://appbase-demo-ansible-abxiydt-arc.searchbase.io",
    app: "best-buy-dataset",
    credentials: "b8917d239a52:82a2f609-6439-4253-a542-3697f5545947",
    settings: {
      userId: "s@s",
      enableQueryRules: true,
      recordAnalytics: true,
    },
  };
```

--------------------------------

### Initialize ReactiveBase Component with Appbase.io Credentials

Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/react/overview/reactivemaps

This snippet demonstrates the initial setup of the `ReactiveBase` component in `src/App.js`. It connects to an Elasticsearch backend via appbase.io, configuring the application name ('earthquakes'), the URL with specific credentials, and a Google Maps API key. This component acts as the primary backend connector for all other ReactiveSearch components.

```JavaScript
// ... other imports
import { ReactiveBase } from '@appbaseio/reactivesearch';

class App extends Component {
	render() {
		return (
			<ReactiveBase
				app="earthquakes"
				url="https://a03a1cb71321:385c84ea-41df-4e40-a22d-339a2224ecd7@appbase-demo-ansible-abxiydt-arc.searchbase.io"
				enableAppbase
				mapKey="AIzaSyA9JzjtHeXg_C_hh_GdTBdLxREWdj3nsOU"
			>
				{/* // other components will go here. */}
				<div>Hello ReactiveSearch!</div>
			</ReactiveBase>
		);
	}
}
```

--------------------------------

### Include Searchbase UMD Build via CDN

Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/searchbase/overview/QuickStart

These HTML script tags allow you to directly load the Universal Module Definition (UMD) build of `@appbaseio/searchbase` from a Content Delivery Network (CDN). This method is suitable for browser-based applications where a module bundler is not used, making the library globally accessible. The second script tag includes the source map for debugging.

```HTML
<script defer src="https://cdn.jsdelivr.net/npm/@appbaseio/[email protected]/dist/@appbaseio/searchbase.umd.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/@appbaseio/[email protected]/dist/@appbaseio/searchbase.umd.min.js.map"></script>
```

--------------------------------

### Integrate SingleRange Component for Numeric Filtering in Vue

Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/vue/overview/quickstart

This Vue template code illustrates the `single-range` component, used for implementing a range-based filter on numeric data, such as ratings. It sets the component ID, the `dataField`, a `defaultValue` for initial selection, and a `data` array that defines the start, end, and label for each selectable range option.

```Vue
<single-range
    componentId="Ratings"
	dataField="average_rating"
	defaultValue="All Books"
	:data="[
		{ start: 0, end: 5, label: 'All Books' },
		{ start: 4, end: 5, label: '4 stars and up' },
		{ start: 3, end: 5, label: '3 stars and up' }
	]"
	title="Book Ratings"
/>
```

--------------------------------

### HTML Structure for Search Input and Results

Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/searchbase/overview/quickstart

This HTML snippet defines the basic structure required for the search example. It includes an `<input>` element with `id="search"` for user input and a `<div>` element with `id="results"` where the search results will be dynamically rendered by the JavaScript code.

```html
<input placeholder="type to search" id="search" />

<div id="results"></div>
```

--------------------------------

### Server-side State Hydration with getServerState in Nuxt.js

Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/vue/advanced/ssr

This example demonstrates how to use the `getServerState` utility method within a Nuxt.js application's `<script setup>` block. It fetches the initial state on the server using the `Search` component and the current route's query parameters, then passes this state to the client-side `Search` component for hydration.

```Vue
<script setup>
import { getServerState } from "@appbaseio/reactivesearch-vue";
import Search from "../components/search.vue";
const route = useRoute();
// Fetch server state at server-side and inject `initial-state` at client-side
const { data, pending, error, refresh } = await useAsyncData(() =>
  getServerState(Search, route.query)
);
const initialState = data.value;
</script>

<template>
  <div>
    <search :initial-state="initialState" />
  </div>
</template>
```

--------------------------------

### React NumberBox Component Usage Examples

Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/react/v3/range/numberbox

Examples demonstrating how to integrate and configure the `NumberBox` component in a React application, covering basic setup and usage with all available properties for filtering numeric data based on a range.

```JSX
<NumberBox
	componentId="NumberBoxSensor"
	dataField="guests"
	data={{ label: 'Guests', start: 0, end: 5 }}
	title="NumberBox component"
/>
```

```JSX
<NumberBox
    componentId="NumberBoxSensor"
    compoundClause="filter"
    dataField="guests"
    data={{ label: 'Guests', start: 0, end: 5 }}
    title="NumberBox component"
    defaultValue={0}
    labelPosition="left"
    queryFormat="gte"
    endpoint={{
      url:"https://appbase-demo-ansible-abxiydt-arc.searchbase.io/recipes-demo/_reactivesearch.v3", //mandatory
      headers:{
        // relevant headers
      },
      method: 'POST'
    }}
    URLParams={false}
/>
```

--------------------------------

### Define HTML Structure for Searchbox Input

Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/searchbox/quickstart

This HTML snippet shows the basic structure required for integrating the searchbox component. It includes an input field with a specific ID (`git`) where the searchbox will be initialized, and a script tag to link the JavaScript logic that powers the search functionality.

```html
<!-- Head elements -->
<body>
	<!-- Other elements -->
	<input type="text" id="git" placeholder="Search movies..." />
	<script src="./index.js"></script>
</body>
```

--------------------------------

### ReactiveSearch Component Prop: from

Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/searchbase/overview/searchcomponent

Defines the starting page for results, essential for implementing pagination.

```APIDOC
from:
  Type: number
  Optional: Yes
  Description: To define from which page to start the results, it is important to implement pagination.
```
Tokens:
Raw