Searchkit對Searchbox輸入的跟蹤更改

Question

我正在嘗試從庫Searchkit跟蹤SearchBox組件上的onChange事件。 我想在輸入字段下進行某種自動填充彈出式菜單。

我有一個Searchbar組件和SearchbarPopup組件。 當我在Searchbox輸入中輸入內容時，我希望輸入為空時顯示或隱藏。 但是現在，我可以從console.log獲得響應。

export class Searchbar extends Component {
  constructor(props){
    super(props)
    this.onChange = this.onChange.bind(this)
  }
  onChange(){
    console.log('input has changed!')
  }
  render() {
    return (
      <SearchkitProvider searchkit={searchkit}>
        <Layout>
          <div className="search">
            <div className="search_query">
              <SearchBox
                autofocus={true}
                searchOnChange={true}
                onChange={this.onChange}
                prefixQueryFields={[
                  "Author",
                  "Title"
                ]}
              />
            </div>
          </div>
        </Layout>
      </SearchkitProvider>
    );
  }
}

呈現的HTML

<div id="cb_Zoekbalk">
    <div class="sk-layout">
        <div class="search">
            <div class="search_query">
                <div class="sk-search-box">
                    <form>
                        <div class="sk-search-box__icon"></div>
                        <input type="text" data-qa="query" class="sk-search-box__text" placeholder="Waar ben je naar op zoek?" value="">
                        <input type="submit" value="search" class="sk-search-box__action" data-qa="submit">
                        <div data-qa="loader" class="sk-search-box__loader sk-spinning-loader is-hidden"></div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

在我的項目中，還需要為SearchBox查詢更改設置一個偵聽器。 這是我找到您可以得到答復的地方：

searchkit.setQueryProcessor((plainQueryObject) => {
  console.log('input has changed!')

  return plainQueryObject
})

鏈接到SearchkitManager的文檔