GitHub

Add a new filter attribute to search_settings.

When a writers filter is applied, will add a match filter clause to the query.

{
  search_settings: {
    filter_attributes: [
      {
        attribute: 'writers',
        type: 'string',
        field: 'writers',
        filterQuery: (field, value) => {
          return {
            match: {
              [field]: value,
            },
          };
        },
      }
    ]
  }
}

Add a custom component that holds the writers input state and passes the filter to the search with Configure. react-instantsearch (v7) no longer has createConnector, so the custom input is a plain component.

import React, { useState } from "react";
import { Configure } from "react-instantsearch";
 
const WritersSearchInput = () => {
  const [query, setQuery] = useState("");
  const [writers, setWriters] = useState("");
  return (
    <>
      <Configure facetFilters={writers ? [`writers:${writers}`] : []} />
      <form onSubmit={(e) => {
        e.preventDefault(); setWriters(query)
      }}>
        <input
          type="text"
          className="ais-SearchBox-input"
          placeholder="search writers"
          value={query}
          onChange={(e) => {
            setQuery(e.target.value);
          }}
        />
      </form>
    </>
  );
};

Dynamic Widgets Query Rule Context

Example: Adding a custom Filter Input Search Box