[英]Searchkit track change on searchbox input
I'm trying to track an onChange event on a SearchBox component from the library Searchkit . 我正在尝试从库Searchkit跟踪SearchBox组件上的onChange事件。 I want to make some kind of autocomplete-popup, below the input field.
我想在输入字段下进行某种自动填充弹出式菜单。
I'm having a Searchbar component and a SearchbarPopup component. 我有一个Searchbar组件和SearchbarPopup组件。 When I type something inside the Searchbox input I want the to show or hide when input is empty.
当我在Searchbox输入中输入内容时,我希望输入为空时显示或隐藏。 But for now I'm fine with getting a response from the console.log.
但是现在,我可以从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>
);
}
}
Rendered HTML 呈现的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>
In my project, I'm also needed to set a listener on SearchBox query change. 在我的项目中,还需要为SearchBox查询更改设置一个侦听器。 Here is what place I've found where you can get a response:
这是我找到您可以得到答复的地方:
searchkit.setQueryProcessor((plainQueryObject) => {
console.log('input has changed!')
return plainQueryObject
})
Link to a documentation for SearchkitManager 链接到SearchkitManager的文档
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.