"react auto complate"
Bootstrap 3.0.0 Snippet by evarevirus

<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>

Related: See More


Questions / Comments: