debouce search in react

gistfile1.txt

import React, { PropTypes } from 'react';

import _ from 'lodash';
import API from '../../utils/API';

import { TextInput } from '../common/inputs';

const propTypes = {
    onHandleCodeSearch: PropTypes.func.isRequired,
    currentClaim: PropTypes.object.isRequired,
    searchResults: PropTypes.object.isRequired,

};

class ICDInput extends TextInput {

    constructor(props, context) {
        super(props, context);
        let self = this;
        this.handleSearch = this.handleSearch.bind(this);
        this.onChange = this.onChange.bind(this);
        this.handleSearchDebounced = _.debounce(function () {
                self.handleSearch(self.state.fieldName, self.state.searchTerm);
        })
        this.state = {
            searchResults: [],
            searchTerm: '',
            isSearching: false,
            fieldName: null,
        }
    }

    onChange(fieldName, e) {
        this.setState({searchTerm: e.target.value, fieldName: fieldName});
        this.handleSearchDebounced();
    }

    handleSearch(fieldName, value) {
        let self = this;

        self.setState({isSearching: true});

        API.icd.get({
            params: {
                code__istartswith: value,
                icd_indicator: 0,
                format: 'json',
            }
        })
        .then((response)=> {
            self.setState({searchTerm: value});
            self.setState({searchResults: response.data.results });
            if (self.state.searchResults.length === 1 && self.state.searchResults[0].is_ok_for_cms) {
                self.props.onHandleChange(self.props.name, self.state.searchResults[0].code);
                self.setState({isSearching: false});
            }
        });
    }

    getContent() {
        const self = this;

        if(_.isEmpty(this.props.currentClaim)) {
            return null;
        }

        let value = this.props.currentClaim[this.props.name];
        if (this.state.isSearching) {
            value = this.state.searchTerm;
        }

        let codesFound = self.state.searchResults.map((x)=>{
                return x.code;
            }).join(", ");

        console.log(codesFound)

        return <div className="row">
            <div className="col-25 frm-lbl">
                ICD Diagnosis Code 1 :
            </div>

            <div className="col-25 btn-add-on">
                <input type="text" value={value}
                    onChange={this.onChange.bind(this, self.props.name)}/>
                <If condition={self.state.searchResults.length === 1 && self.state.searchResults[0].is_ok_for_cms}>
                    <button className="n-hvr bkg-green">
                        <span className="icon-check"></span>
                    </button>
                </If>
            </div>

            <div className="col-50 pd-lft">
                <If condition={self.state.searchResults.length === 1}>
                    <summary>
                        {self.state.searchResults[0].long_description}
                    </summary>
                </If>
                <If condition={self.state.searchResults.length >= 5 }>
                    <summary>
                        Found {self.state.searchResults.length} results.
                    </summary>
                </If>
                <If condition={self.state.searchResults.length > 1 && self.state.searchResults.length < 5 }>
                    <summary>
                        Found: {codesFound}
                    </summary>
                </If>
            </div>
        </div>;
    }
}

ICDInput.propTypes = propTypes;

export default ICDInput;