https://dww.surge.sh/DWW/js/DWW_AutoComplete.jsx

1//Master wrapper for the AutoComplete component
2var VFXAutoComplete = React.createClass({
3	//PUBLIC METHOD - get AutoComplete selection
4	getSelection: function(){
5		return this.state.selectedValue;
6	},
7	getInitialState: function(){
8		return { 
9			suggestedStudios: [],
10			suggestedMovies: [],
11			selectedValue: null,
12			inputText: ""
13		}
14	},
15	componentDidMount: function() {
16	    $.ajax({
17	      url: this.props.studioUrl,
18	      dataType: 'json',
19	      success: function(data) {
20	      	this.setProps({
21	      		allStudios: this.extractStudios(data)
22	      	});
23	      }.bind(this),
24	      error: function(xhr, status, err) {
25	        console.error(this.props.url, status, err.toString());
26	      }.bind(this)
27	    });
28
29	    $.ajax({
30	      url: this.props.movieUrl,
31	      dataType: 'json',
32	      success: function(data) {
33	      	this.setProps({
34	      		allMovies: this.extractMovies(data)
35	      	});
36	      }.bind(this),
37	      error: function(xhr, status, err) {
38	        console.error(this.props.url, status, err.toString());
39	      }.bind(this)
40	    });
41  	},
42  	extractStudios: function(data) {
43  		var studios = [];
44		for (var i = 0; i < data.studios.length; i++) {
45	        studios.push({
46	        	name: data.studios[i].name,
47	        	id: data.studios[i].imdbID
48	        });
49	    }
50	    return studios;
51  	},
52  	extractMovies: function(data) {
53  		var movies = [];
54		for (var i = 0; i < data.length; i++) {
55	        movies.push({
56	        	name: data[i].name,
57	        	id: data[i].imdbID
58	        });
59	    }
60	    return movies;
61  	},
62  	updateAutoSuggestion: function(input){
63  		var suggestedStudios = [];
64  		var suggestedMovies = [];
65  		if(input!= ""){
66  			function checkSuggestion(name, id, type, array){
67  				var index = name.toUpperCase().indexOf(input.toUpperCase());
68  				var data = {
69  					name: name,
70  					id: id,
71  					type: type
72  				};
73	  			if(index == 0) array.unshift(data); //priorities at head of list
74	  			else if(index != -1) array.push(data);
75	  			return array;
76  			}
77  			for(var i=0; i<this.props.allStudios.length; i++){
78	  			var value = this.props.allStudios[i];
79	  			suggestedStudios = checkSuggestion(value.name, value.id, "Studio", suggestedStudios);
80  			}
81  			for(var i=0; i<this.props.allMovies.length; i++){
82	  			var value = this.props.allMovies[i];
83	  			suggestedMovies = checkSuggestion(value.name, value.id, "Movie", suggestedMovies);
84  			}
85  		}
86  		this.setState({
87  			suggestedStudios: suggestedStudios,
88  			suggestedMovies: suggestedMovies
89  		});
90  	},
91  	handleChange: function(e){
92  		this.setState({inputText: e.target.value});
93  		this.updateAutoSuggestion(e.target.value);
94  		if(Bridge.FeatureBox.currentlyOpen() == "Search Box") Bridge.FeatureBox.close(); //close on type
95  	},
96  	handleSubmit: function(name, id, type){
97  		this.setState({ 
98  			suggestedStudios: [],
99  			suggestedMovies: [],
100  			selectedValue: name,
101  			inputText: name
102  		});
103  		if(type == "Studio") Bridge.AutoComplete.requestStudioSelection(id);
104  		else if(type == "Movie") Bridge.AutoComplete.requestMovieSelection(id);
105  	},
106  	handleKeyDown: function(e){
107  		if (e.keyCode == 13 ) {
108            //CASE: one option remaining
109            var first = null;
110            if(this.state.suggestedStudios.length >= 1) first = this.state.suggestedStudios[0];
111            else if(this.state.suggestedMovies.length >= 1) first = this.state.suggestedMovies[0];
112            if(first) this.handleSubmit(first.name, first.id, first.type);
113        }
114  	},
115  	requestFeatureBox: function(){
116		var name = "Search Box";
117		var blurb = "Type here to search by company name or movie title.";
118		var x = 1;
119		var y = 78;
120		Bridge.FeatureBox.request(name, blurb, x, y);
121	},
122  	render: function(){
123  		var drawStudioSuggestions = this.state.suggestedStudios.length > 0 ? <VFXStudioSuggestor title="Studios" suggestedValues={this.state.suggestedStudios} submit={this.handleSubmit} /> : null;
124  		var drawMovieSuggestions = this.state.suggestedMovies.length > 0 ? <VFXStudioSuggestor title="Movies" suggestedValues={this.state.suggestedMovies} submit={this.handleSubmit} /> : null;
125  		return (
126  			<div className="vfxAutoComplete" onMouseEnter={this.requestFeatureBox}>
127  				{drawStudioSuggestions}
128  				{drawMovieSuggestions}
129  				<input value={this.state.inputText} placeholder="Search" onChange={this.handleChange} onKeyDown={this.handleKeyDown} ></input>
130  			</div>
131  		);
132  	}
133});
134
135//Grouping component of all studio suggestions
136var VFXStudioSuggestor = React.createClass({
137	handleSubmit: function(value, id, type){
138		this.props.submit(value, id, type);
139	},
140	render: function(){
141
142		var vals = this.props.suggestedValues.map(function(data, i) {
143			var name = data.name;
144			var id = data.id;
145			var type = data.type;
146			return (
147				<VFXStudioSuggestion name={name} key={i} submit={this.handleSubmit.bind(this, name, id, type)} />
148			);
149		}, this);
150
151  		return (
152  			<div>
153	  			<div className="vfxAutoCompleteTitleBar">{this.props.title}</div>
154		  		<div className="vfxStudioSuggestor">
155		  			{vals}
156		  		</div>
157		  	</div>
158  		);
159  	}
160});
161
162//The individual suggestions
163var VFXStudioSuggestion = React.createClass({
164	getInitialState: function(){
165		return {
166			highlight: false
167		};
168	},
169	toggleHighlight: function(){
170		this.setState({ highlight: !this.state.highlight });
171	},
172	render: function(){
173		return (
174			<div className={this.state.highlight ? "vfxStudioSuggestion highlight" : "vfxStudioSuggestion"} onClick={this.props.submit} onMouseOver={this.toggleHighlight} onMouseOut={this.toggleHighlight}>
175				{this.props.name}
176			</div>
177		);
178	}
179});
180
181
182autoComplete = React.render(
183  <VFXAutoComplete studioUrl="data/studios.json" movieUrl="data/movies.json" />,
184  document.getElementById('autoCompleteContainer')
185);