autoCompleteSearch.jsx 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  1. import React,{Component} from "react";
  2. import {AutoComplete, message, Select,Spin} from "antd";
  3. import $ from "jquery/src/ajax";
  4. class AutoCompleteSearch extends Component{
  5. constructor(props) {
  6. super(props);
  7. this.state={
  8. contactsOption:[],
  9. autoCompleteSearchLoading:false
  10. }
  11. this.onSelect = this.onSelect.bind(this);
  12. this.onSearch = this.onSearch.bind(this);
  13. }
  14. onSelect(value){
  15. this.props.onSelect(value)
  16. }
  17. onSearch(value){
  18. this.setState({
  19. autoCompleteSearchLoading: true
  20. });
  21. let data = {};
  22. data[this.props.config.search] = value
  23. $.ajax({
  24. method: "get",
  25. dataType: "json",
  26. crossDomain: false,
  27. url: globalConfig.context + this.props.config.api,
  28. data,
  29. success: function (data) {
  30. let theArr = [];
  31. if (data.error && data.error.length === 0) {
  32. for(let i=0;i<data.data.length;i++){
  33. let theData = data.data[i];
  34. theArr.push(
  35. {
  36. value:theData.id,
  37. label:theData.name
  38. }
  39. );
  40. };
  41. this.setState({
  42. contactsOption: theArr,
  43. });
  44. }else{
  45. message.warning(data.error[0].message);
  46. }
  47. }.bind(this),
  48. }).always(function () {
  49. this.setState({
  50. autoCompleteSearchLoading: false
  51. });
  52. }.bind(this));
  53. }
  54. render() {
  55. const customerOptions = this.state.contactsOption.map((group) => (
  56. <Select.Option key={group.label} value={group.value}>
  57. {group.label}
  58. </Select.Option>
  59. ));
  60. return (
  61. <Spin spinning={this.state.autoCompleteSearchLoading}>
  62. <AutoComplete
  63. dataSource={customerOptions}
  64. style={{ width: 200 }}
  65. onSelect={this.onSelect}
  66. onSearch={this.onSearch}
  67. placeholder={this.props.config.placeholder}
  68. />
  69. </Spin>
  70. )
  71. }
  72. }
  73. export default AutoCompleteSearch;