var ProfessorInfo = React.createClass({
  render: function() {
    return (
      <div className="item">
        <div className="ui tiny image">
          <img src={this.props.data.picture} />
        </div>
        <div className="content">
          <p className="header">{this.props.data.name}</p>
          <div className="meta">
          </div>
        </div>
      </div>
    );
  }
});

var ProfessorList = React.createClass({
  dropdown: null,
  searchSchedule: null,
  getProfessor: function(name) {
    $.get({
      url: this.props.url,
      data: { name: name },
      success: (data) => {
        this.dropdown.removeClass("loading");
        this.setState({isLoading: false, data: JSON.parse(data).professors });
      }
    });
  },
  componentDidMount: function() {
    this.dropdown = $(this.props.dropdown);
    this.dropdown.dropdown();
    var input = this.dropdown.find(".search");
    input.change(() => {
      if (!this.state.isLoading) {
        this.setState({isLoading: true});
        this.dropdown.addClass("loading");
      }
      clearTimeout(this.searchSchedule);
      this.searchSchedule = setTimeout(() => {
        this.getProfessor(input.val());
      }, 600);
    });
  },
  getInitialState: function() {
    return { data: [], isLoading: false };
  },
  render: function() {
    var list = this.state.data.map(function(professor) {
      return (
        <ProfessorInfo data={professor} key={professor.id} />
      )
    });

    return (
      <div>
        {list}
      </div>
    );
  }
});

function initProfessorFinder(dropdown, container, searchUrl) {
  ReactDOM.render(
    <ProfessorList dropdown={dropdown} url={searchUrl} />,
    $(container)[0]
  );
}

@@ -1,1705 +1 @@
-var ProfessorInfo = React.createClass(%7B%0A  render: function() %7B%0A    return (%0A      %3Cdiv className=%22item%22%3E%0A        %3Cdiv className=%22ui tiny image%22%3E%0A          %3Cimg src=%7Bthis.props.data.picture%7D /%3E%0A        %3C/div%3E%0A        %3Cdiv className=%22content%22%3E%0A          %3Cp className=%22header%22%3E%7Bthis.props.data.name%7D%3C/p%3E%0A          %3Cdiv className=%22meta%22%3E%0A          %3C/div%3E%0A        %3C/div%3E%0A      %3C/div%3E%0A    );%0A  %7D%0A%7D);%0A%0Avar ProfessorList = React.createClass(%7B%0A  dropdown: null,%0A  searchSchedule: null,%0A  getProfessor: function(name) %7B%0A    $.get(%7B%0A      url: this.props.url,%0A      data: %7B name: name %7D,%0A      success: (data) =%3E %7B%0A        this.dropdown.removeClass(%22loading%22);%0A        this.setState(%7BisLoading: false, data: JSON.parse(data).professors %7D);%0A      %7D%0A    %7D);%0A  %7D,%0A  componentDidMount: function() %7B%0A    this.dropdown = $(this.props.dropdown);%0A    this.dropdown.dropdown();%0A    var input = this.dropdown.find(%22.search%22);%0A    input.change(() =%3E %7B%0A      if (!this.state.isLoading) %7B%0A        this.setState(%7BisLoading: true%7D);%0A        this.dropdown.addClass(%22loading%22);%0A      %7D%0A      clearTimeout(this.searchSchedule);%0A      this.searchSchedule = setTimeout(() =%3E %7B%0A        this.getProfessor(input.val());%0A      %7D, 600);%0A    %7D);%0A  %7D,%0A  getInitialState: function() %7B%0A    return %7B data: %5B%5D, isLoading: false %7D;%0A  %7D,%0A  render: function() %7B%0A    var list = this.state.data.map(function(professor) %7B%0A      return (%0A        %3CProfessorInfo data=%7Bprofessor%7D key=%7Bprofessor.id%7D /%3E%0A      )%0A    %7D);%0A%0A    return (%0A      %3Cdiv%3E%0A        %7Blist%7D%0A      %3C/div%3E%0A    );%0A  %7D%0A%7D);%0A%0Afunction initProfessorFinder(dropdown, container, searchUrl) %7B%0A  ReactDOM.render(%0A    %3CProfessorList dropdown=%7Bdropdown%7D url=%7BsearchUrl%7D /%3E,%0A    $(container)%5B0%5D%0A  );%0A%7D
 %0A

Remove unused codes