2 * ============LICENSE_START=======================================================
4 * ================================================================================
5 * Copyright © 2017-2021 AT&T Intellectual Property. All rights reserved.
6 * ================================================================================
7 * Licensed under the Apache License, Version 2.0 (the "License");
8 * you may not use this file except in compliance with the License.
9 * You may obtain a copy of the License at
11 * http://www.apache.org/licenses/LICENSE-2.0
13 * Unless required by applicable law or agreed to in writing, software
14 * distributed under the License is distributed on an "AS IS" BASIS,
15 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
16 * See the License for the specific language governing permissions and
17 * limitations under the License.
18 * ============LICENSE_END=========================================================
80 // https://developer.mozilla.org/en/docs/Web/JavaScript/Guide/Regular_Expressions#Using_Special_Characters
81 function escapeRegexCharacters(str) {
82 return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
85 function getSuggestions(value) {
86 const escapedValue = escapeRegexCharacters(value.trim());
88 const regex = new RegExp('^' + escapedValue, 'i');
90 return languages.filter(language => regex.test(language.name));
93 function getSuggestionValue(suggestion) {
94 return suggestion.name;
97 function renderSuggestion(suggestion) {
99 <span>{suggestion.name}</span>
103 class Test extends React.Component {
109 suggestions: getSuggestions('')
112 this.onChange = this.onChange.bind(this);
113 this.onSuggestionsUpdateRequested = this.onSuggestionsUpdateRequested.bind(this);
116 onChange(event, { newValue, method }) {
122 onSuggestionsUpdateRequested({ value }) {
124 suggestions: getSuggestions(value)
129 const { value, suggestions } = this.state;
131 placeholder: "Type 'c'",
133 onChange: this.onChange
137 <Autosuggest suggestions={suggestions}
138 onSuggestionsUpdateRequested={this.onSuggestionsUpdateRequested}
139 shouldRenderSuggestions={() => true}
140 getSuggestionValue={getSuggestionValue}
141 renderSuggestion={renderSuggestion}
142 inputProps={inputProps} />
147 ReactDOM.render(<App />, document.getElementById('app'));