import React, {Component} from "react"; import 'antd/dist/antd.css'; import {AutoComplete} from "antd"; import {auto_complete_nvr} from "../../api_calls/build_calls"; export default class Autocomplete_filter extends Component{ constructor(props) { super(props); this.state = { placeholder: this.props.placeholder, options: [] } this.update_options(); this.onChange = this.onChange.bind(this); } format_data_for_use(data){ let options = [] data.forEach(data_value=>{ options.push({value: data_value}) }); return options; } update_options(){ auto_complete_nvr().then((data) =>{ data = this.format_data_for_use(data["data"]); this.setState({options: data}) }) } update_placeholder(placeholder){ this.setState({placeholder: placeholder}) } componentWillReceiveProps(nextProps, nextContext) { this.update_options(); this.update_placeholder(nextProps.placeholder); } onChange(value){ let where_cond = { "dg_qualified_name": [{"value": value, "cond": "=", "like_or_where": "like", "name": "NVR"}]} this.props.search_callback(where_cond); } render() { return ( <AutoComplete style={{ width: "90%", paddingRight: "10%" }} allowClear={true} options={this.state.options} placeholder={this.state.placeholder} value={this.state.value} onSelect={this.onChange} filterOption={(inputValue, option) => option.value.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1 } /> ) } }