<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/guywald/pen/ZpVxOa?depth=everything&order=popularity&page=30&q=react&show_forks=false" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'>
<style class="cp-pen-styles">body {
width: 100vw;
height: 100vh;
overflow: hidden;
font-family: Helvetica, sans-serif;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-font-smoothing: antialiased;
}
.wrapper {
width: 100vw;
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-flow: column nowrap;
flex-flow: column nowrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
overflow: hidden;
}
.wrapper-input {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: relative;
}
.loading-spinner {
color: red;
position: absolute;
left: -3em;
content: "";
border: 2px solid rgba(0, 0, 0, 0.2);
border-top: 2px solid rgba(0, 0, 0, 0.4);
width: 1em;
height: 1em;
border-radius: 50%;
-webkit-animation: spin 1s linear infinite;
animation: spin 1s linear infinite;
}
@-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spin {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.status {
line-height: 52px;
}
.react-autosuggest__container {
width: 24em;
height: auto;
position: relative;
}
section {
margin: 4em 0;
}
h3 {
margin-bottom: 1em;
font-weight: bold;
color: steelblue;
}
.react-autosuggest__input {
display: block;
width: 100%;
height: 4em;
padding: 1em 1.5em;
box-sizing: border-box;
font-size: 1em;
border: 1px solid #aaa;
border-radius: 2em;
outline: none;
-webkit-transition: border-radius 250ms ease;
transition: border-radius 250ms ease;
}
.react-autosuggest__input:focus {
outline: none;
border: 1px solid steelblue;
}
.react-autosuggest__container--open .react-autosuggest__input {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border-bottom: 0;
}
.react-autosuggest__suggestions-container {
width: 100%;
visibility: hidden;
will-change: opacity;
position: relative;
overflow: hidden;
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: scale(1, 0);
transform: scale(1, 0);
opacity: 0;
-webkit-transition: all 250ms ease;
transition: all 250ms ease;
}
.react-autosuggest__container--open .react-autosuggest__suggestions-container {
display: block;
position: absolute;
top: 3em;
width: 100%;
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
visibility: visible;
opacity: 1;
box-sizing: border-box;
border: 1px solid steelblue;
border-top: 0;
background-color: #fff;
font-family: Helvetica, sans-serif;
border-radius: 2em;
border-top-left-radius: 0;
border-top-right-radius: 0;
z-index: 2;
}
.react-autosuggest__container--open .react-autosuggest__suggestions-container .suggestion {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.react-autosuggest__container--open .react-autosuggest__suggestions-container .name {
color: #ccc;
}
.react-autosuggest__container--open .react-autosuggest__suggestions-container .username {
font-size: 0.7em;
padding: 0.25em 0.5em;
box-sizing: border-box;
background: #ccc;
color: white;
margin-right: 1em;
}
.react-autosuggest__suggestions-list {
margin: 0;
padding: 0;
list-style-type: none;
}
.react-autosuggest__suggestion {
cursor: default;
box-sizing: border-box;
padding: 1em 1.5em;
}
.react-autosuggest__suggestion .name b {
font-weight: bold;
color: #888;
}
.react-autosuggest__suggestion--focused .suggestion {
color: #699bc4;
}
.react-autosuggest__suggestion--focused .suggestion b {
color: #3f75a2;
}
</style></head><body>
<!-- for preview -->
<div className="wrapper">
<section class="wrapper-input"><div class="react-autosuggest__container"><input type="text" value="" autocomplete="off" role="combobox" aria-autocomplete="list" aria-owns="react-autowhatever-1" aria-expanded="false" aria-haspopup="false" class="react-autosuggest__input" placeholder="Type 'c'"><div id="react-autowhatever-1" class="react-autosuggest__suggestions-container"></div></div></section>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js'></script><script src='https://unpkg.com/react-autosuggest@7.0.1/dist/standalone/autosuggest.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/axios/0.15.2/axios.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.16.0/polyfill.min.js'></script>
<script >'use strict';
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
function getRegexAnywhere(val) {
return new RegExp('' + val, 'i');
}
function getMatchingUser(value, data) {
var escapedValue = escapeRegexCharacters(value.trim());
if (escapedValue === '') {
return [];
}
var regex = getRegexAnywhere(escapedValue);
return data.filter(function (user) {
return regex.test(user.name);
});
}
function sortMatches(matchesArr, query) {
return matchesArr.sort(function (a, b) {
var matches1 = _.startsWith(a.name, query);
var matches2 = _.startsWith(b.name, query);
if (!matches1 && matches2) return true;else if (matches1 && !matches2) return false;
return a.name < b.name ? -1 : +(a.name > b.name);
}).slice(0, 4);
}
/* ----------- */
/* Utils */
/* ----------- */
// https://developer.mozilla.org/en/docs/Web/JavaScript/Guide/Regular_Expressions#Using_Special_Characters
function escapeRegexCharacters(str) {
return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}
/* --------------- */
/* Component */
/* --------------- */
function getSuggestionValue(suggestion) {
return suggestion.name;
}
function renderSuggestion(suggestion, _ref) {
var query = _ref.query;
var regexp = new RegExp('^(.*?)(' + query + ')(.*)$', 'i');
var matches = getSuggestionValue(suggestion).match(regexp);
if (!matches || matches.length < 3) return null;
if (matches) {
matches.shift();
matches[0] = React.createElement(
'b',
null,
matches[0]
);
matches[2] = React.createElement(
'b',
null,
matches[2]
);
} else {
matches = suggestion.name;
}
return React.createElement(
'span',
{ className: 'suggestion' },
React.createElement(
'em',
{ className: 'username' },
suggestion.username
),
React.createElement(
'span',
{ className: 'name' },
matches
)
);
}
var App = function (_React$Component) {
_inherits(App, _React$Component);
function App() {
_classCallCheck(this, App);
var _this = _possibleConstructorReturn(this, _React$Component.call(this));
_this.onChange = function (event, _ref2) {
var newValue = _ref2.newValue;
_this.setState({
value: newValue
});
};
_this.onSuggestionsFetchRequested = function (_ref3) {
var value = _ref3.value;
_this.loadSuggestions(value);
};
_this.onSuggestionsClearRequested = function () {
_this.setState({
suggestions: []
});
};
_this.onSuggestionSelected = function (evt, _ref4) {
var suggestion = _ref4.suggestion;
_this.setState({
value: '',
selections: [].concat(_this.state.selections, [suggestion])
});
};
_this.state = {
value: '',
suggestions: [],
selections: [],
isLoading: false
};
_this.cache = {
suggestions: _this.state.suggestions
};
_this.lastRequestId = null;
return _this;
}
App.prototype.loadSuggestions = function loadSuggestions(value) {
var _this2 = this;
// Cancel the previous request
if (this.lastRequestId !== null) {
this.lastRequestId = null;
}
if (this.cache.suggestions.length) this.setState({
isLoading: true,
suggestions: sortMatches(getMatchingUser(value, this.cache.suggestions), value)
});else {
this.setState({
isLoading: true,
suggestions: []
});
}
this.lastRequestId = axios.get('https://jsonplaceholder.typicode.com/users?a=' + Math.random()).then(function (res) {
_this2.cache.suggestions = [].concat(_this2.cache.suggestions, res.data);
_this2.cache.suggestions = _.uniqBy(_this2.cache.suggestions, function (s) {
return s.name;
});
_this2.setState({
isLoading: false,
suggestions: sortMatches(getMatchingUser(value, _this2.cache.suggestions), value)
});
}).catch(function (err) {
var data = _this2.cache.suggestions;
_this2.setState({
isLoading: false,
suggestions: sortMatches(getMatchingUser(value, data), value)
});
});
};
App.prototype.render = function render() {
var _state = this.state;
var value = _state.value;
var suggestions = _state.suggestions;
var isLoading = _state.isLoading;
var inputProps = {
placeholder: "Type 'c'",
value: value,
onChange: this.onChange
};
return React.createElement(
'div',
{ className: 'wrapper' },
React.createElement(
'section',
{ className: 'wrapper-input' },
isLoading ? React.createElement('span', { className: 'loading-spinner' }) : null,
React.createElement(Autosuggest, {
suggestions: suggestions,
onSuggestionsFetchRequested: this.onSuggestionsFetchRequested,
onSuggestionsClearRequested: this.onSuggestionsClearRequested,
getSuggestionValue: getSuggestionValue,
renderSuggestion: renderSuggestion,
onSuggestionSelected: this.onSuggestionSelected,
inputProps: inputProps })
),
React.createElement(
'section',
{ className: 'selections' },
React.createElement(
'h3',
null,
'You have selected:'
),
React.createElement(
'ul',
null,
this.state.selections.map(function (s) {
return React.createElement(
'li',
null,
s.name
);
})
)
)
);
};
return App;
}(React.Component);
ReactDOM.render(React.createElement(App, null), document.body);
//# sourceURL=pen.js
</script>
</body></html>
