├── README.md ├── css ├── component.css └── default.css ├── fonts ├── codropsicons │ ├── codropsicons.eot │ ├── codropsicons.svg │ ├── codropsicons.ttf │ ├── codropsicons.woff │ └── license.txt └── icomoon │ ├── icomoon.dev.svg │ ├── icomoon.eot │ ├── icomoon.svg │ ├── icomoon.ttf │ ├── icomoon.woff │ └── license.txt ├── index.html └── js ├── classie.js ├── modernizr.custom.js └── uisearch.js /README.md: -------------------------------------------------------------------------------- 1 | 2 | Expanding Search Bar Deconstructed 3 | ========= 4 | A tutorial on how to create a mobile-friendly and responsive expanding search bar. 5 | 6 | [article on Codrops](http://tympanus.net/codrops/?p=15599) 7 | 8 | [demo](http://tympanus.net/Tutorials/ExpandingSearchBar/) 9 | 10 | [LICENSING & TERMS OF USE](http://tympanus.net/codrops/licensing/) -------------------------------------------------------------------------------- /css/component.css: -------------------------------------------------------------------------------- 1 | /* Search icon by IcoMoon, made with http://icomoon.io/app/ */ 2 | @font-face { 3 | font-family: 'icomoon'; 4 | src:url('../fonts/icomoon/icomoon.eot'); 5 | src:url('../fonts/icomoon/icomoon.eot?#iefix') format('embedded-opentype'), 6 | url('../fonts/icomoon/icomoon.woff') format('woff'), 7 | url('../fonts/icomoon/icomoon.ttf') format('truetype'), 8 | url('../fonts/icomoon/icomoon.svg#icomoon') format('svg'); 9 | font-weight: normal; 10 | font-style: normal; 11 | } 12 | /* Container for the entire search element */ 13 | .sb-search { 14 | position: relative; 15 | margin-top: 10px; 16 | width: 0%; 17 | min-width: 60px; 18 | height: 60px; 19 | float: right; 20 | overflow: hidden; 21 | -webkit-transition: width 0.3s; 22 | -moz-transition: width 0.3s; 23 | transition: width 0.3s; 24 | -webkit-backface-visibility: hidden; 25 | } 26 | /* The input element on the search element */ 27 | .sb-search-input { 28 | position: absolute; 29 | top: 0; 30 | right: 0; 31 | border: none; 32 | outline: none; 33 | background: #fff; 34 | width: 100%; 35 | height: 60px; 36 | margin: 0; 37 | z-index: 10; 38 | padding: 20px 65px 20px 20px; 39 | font-family: inherit; 40 | font-size: 20px; 41 | color: #2c3e50; 42 | } 43 | 44 | 45 | input[type="search"].sb-search-input { 46 | /* remove special webkit formatting on the search input */ 47 | -webkit-appearance: none; 48 | -webkit-border-radius: 0px; 49 | } 50 | 51 | /* browser specific placholder text color */ 52 | .sb-search-input::-webkit-input-placeholder { 53 | color: #efb480; 54 | } 55 | 56 | .sb-search-input:-moz-placeholder { 57 | color: #efb480; 58 | } 59 | 60 | .sb-search-input::-moz-placeholder { 61 | color: #efb480; 62 | } 63 | 64 | .sb-search-input:-ms-input-placeholder { 65 | color: #efb480; 66 | } 67 | /* format the search button and submit to share the same size and space */ 68 | .sb-icon-search, 69 | .sb-search-submit { 70 | width: 60px; 71 | height: 60px; 72 | display: block; 73 | position: absolute; 74 | right: 0; 75 | top: 0; 76 | padding: 0; 77 | margin: 0; 78 | line-height: 60px; 79 | text-align: center; 80 | cursor: pointer; 81 | } 82 | /* hide the submit but leave it clickable */ 83 | .sb-search-submit { 84 | background: #fff; /* IE needs this */ 85 | -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE 8 */ 86 | filter: alpha(opacity=0); /* IE 5-7 */ 87 | opacity: 0; 88 | color: transparent; 89 | border: none; 90 | outline: none; 91 | z-index: -1; 92 | } 93 | 94 | /* format the search icon */ 95 | .sb-icon-search { 96 | color: #fff; 97 | background: #e67e22; 98 | z-index: 90; 99 | font-size: 22px; 100 | font-family: 'icomoon'; 101 | speak: none; 102 | font-style: normal; 103 | font-weight: normal; 104 | font-variant: normal; 105 | text-transform: none; 106 | -webkit-font-smoothing: antialiased; 107 | } 108 | 109 | /* add the magnifying glass character from the icomoon font as a before pseudo element */ 110 | .sb-icon-search:before { 111 | content: "\e000"; 112 | } 113 | 114 | /* Open state */ 115 | .sb-search.sb-search-open, 116 | .no-js .sb-search { 117 | width: 100%; 118 | } 119 | 120 | /* add the "active" color on the search button */ 121 | .sb-search.sb-search-open .sb-icon-search, 122 | .no-js .sb-search .sb-icon-search { 123 | background: #da6d0d; 124 | color: #fff; 125 | z-index: 11; 126 | } 127 | 128 | /* adjust z-index to make sure the search submit is clikacble and not below any other elements */ 129 | .sb-search.sb-search-open .sb-search-submit, 130 | .no-js .sb-search .sb-search-submit { 131 | z-index: 90; 132 | } 133 | -------------------------------------------------------------------------------- /css/default.css: -------------------------------------------------------------------------------- 1 | /* General Demo Style */ 2 | @import url(http://fonts.googleapis.com/css?family=Lato:300,400,700); 3 | 4 | @font-face { 5 | font-family: 'codropsicons'; 6 | src:url('../fonts/codropsicons/codropsicons.eot'); 7 | src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'), 8 | url('../fonts/codropsicons/codropsicons.woff') format('woff'), 9 | url('../fonts/codropsicons/codropsicons.ttf') format('truetype'), 10 | url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg'); 11 | font-weight: normal; 12 | font-style: normal; 13 | } 14 | 15 | *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } 16 | body, html { font-size: 100%; padding: 0; margin: 0;} 17 | 18 | /* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */ 19 | .clearfix:before, .clearfix:after { content: " "; display: table; } 20 | .clearfix:after { clear: both; } 21 | 22 | body { 23 | font-family: 'Lato', Calibri, Arial, sans-serif; 24 | color: #eaeaea; 25 | background: #2c3e50; 26 | } 27 | 28 | a { 29 | color: #b4c7da; 30 | text-decoration: none; 31 | } 32 | 33 | a:hover, 34 | a:active { 35 | color: #fff; 36 | } 37 | 38 | /* Header Style */ 39 | .main, 40 | .container > header { 41 | margin: 0 auto; 42 | padding: 2em; 43 | } 44 | 45 | .container > header { 46 | text-align: center; 47 | background: rgba(0,0,0,0.01); 48 | } 49 | 50 | .container > header h1 { 51 | font-size: 2.625em; 52 | line-height: 1.3; 53 | margin: 0; 54 | font-weight: 300; 55 | } 56 | 57 | .container > header span { 58 | display: block; 59 | font-size: 60%; 60 | color: #e67e22; 61 | padding: 0 0 0.6em 0.1em; 62 | } 63 | 64 | /* Main Content */ 65 | .main { 66 | max-width: 69em; 67 | } 68 | 69 | .column { 70 | float: left; 71 | width: 50%; 72 | padding: 0 2em; 73 | min-height: 300px; 74 | position: relative; 75 | } 76 | 77 | .column:nth-child(2) { 78 | box-shadow: -1px 0 0 rgba(0,0,0,0.1); 79 | } 80 | 81 | .column p { 82 | font-weight: 300; 83 | font-size: 2em; 84 | padding: 0; 85 | margin: 0; 86 | text-align: right; 87 | line-height: 1.5; 88 | } 89 | 90 | .column a { 91 | border: 3px solid #b4c7da; 92 | padding: 0 15px; 93 | display: inline-block; 94 | margin: 20px 0; 95 | } 96 | 97 | .column a:hover { 98 | border-color: #fff; 99 | } 100 | 101 | /* To Navigation Style */ 102 | .codrops-top { 103 | background: #566472; 104 | background: rgba(255, 255, 255, 0.2); 105 | text-transform: uppercase; 106 | width: 100%; 107 | font-size: 0.69em; 108 | line-height: 2.2; 109 | } 110 | 111 | .codrops-top a { 112 | padding: 0 1em; 113 | letter-spacing: 0.1em; 114 | color: #fff; 115 | display: inline-block; 116 | } 117 | 118 | .codrops-top a:hover { 119 | background: rgba(255,255,255,0.8); 120 | color: #2c3e50; 121 | } 122 | 123 | .codrops-top span.right { 124 | float: right; 125 | } 126 | 127 | .codrops-top span.right a { 128 | float: left; 129 | display: block; 130 | } 131 | 132 | .codrops-icon:before { 133 | font-family: 'codropsicons'; 134 | margin: 0 4px; 135 | speak: none; 136 | font-style: normal; 137 | font-weight: normal; 138 | font-variant: normal; 139 | text-transform: none; 140 | line-height: 1; 141 | -webkit-font-smoothing: antialiased; 142 | } 143 | 144 | .codrops-icon-drop:before { 145 | content: "\e001"; 146 | } 147 | 148 | .codrops-icon-prev:before { 149 | content: "\e004"; 150 | } 151 | 152 | @media screen and (max-width: 46.0625em) { 153 | .column { 154 | width: 100%; 155 | min-width: auto; 156 | min-height: auto; 157 | padding: 1em; 158 | } 159 | 160 | .column p { 161 | text-align: left; 162 | font-size: 1.5em; 163 | } 164 | 165 | .column:nth-child(2) { 166 | box-shadow: 0 -1px 0 rgba(0,0,0,0.1); 167 | } 168 | } 169 | 170 | @media screen and (max-width: 25em) { 171 | 172 | .codrops-icon span { 173 | display: none; 174 | } 175 | 176 | } -------------------------------------------------------------------------------- /fonts/codropsicons/codropsicons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ExpandingSearchBar/790e7be077fa1251508d65e754921ac3cff64da2/fonts/codropsicons/codropsicons.eot -------------------------------------------------------------------------------- /fonts/codropsicons/codropsicons.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | This is a custom SVG font generated by IcoMoon. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 17 | 18 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /fonts/codropsicons/codropsicons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ExpandingSearchBar/790e7be077fa1251508d65e754921ac3cff64da2/fonts/codropsicons/codropsicons.ttf -------------------------------------------------------------------------------- /fonts/codropsicons/codropsicons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ExpandingSearchBar/790e7be077fa1251508d65e754921ac3cff64da2/fonts/codropsicons/codropsicons.woff -------------------------------------------------------------------------------- /fonts/codropsicons/license.txt: -------------------------------------------------------------------------------- 1 | Icon Set: Font Awesome -- http://fortawesome.github.com/Font-Awesome/ 2 | License: SIL -- http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL 3 | 4 | 5 | Icon Set: Eco Ico -- http://dribbble.com/shots/665585-Eco-Ico 6 | License: CC0 -- http://creativecommons.org/publicdomain/zero/1.0/ -------------------------------------------------------------------------------- /fonts/icomoon/icomoon.dev.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | This is a custom SVG font generated by IcoMoon. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 17 | 18 | -------------------------------------------------------------------------------- /fonts/icomoon/icomoon.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ExpandingSearchBar/790e7be077fa1251508d65e754921ac3cff64da2/fonts/icomoon/icomoon.eot -------------------------------------------------------------------------------- /fonts/icomoon/icomoon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | This is a custom SVG font generated by IcoMoon. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 17 | 18 | -------------------------------------------------------------------------------- /fonts/icomoon/icomoon.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ExpandingSearchBar/790e7be077fa1251508d65e754921ac3cff64da2/fonts/icomoon/icomoon.ttf -------------------------------------------------------------------------------- /fonts/icomoon/icomoon.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ExpandingSearchBar/790e7be077fa1251508d65e754921ac3cff64da2/fonts/icomoon/icomoon.woff -------------------------------------------------------------------------------- /fonts/icomoon/license.txt: -------------------------------------------------------------------------------- 1 | Icon Set: IcoMoon - Free -- http://keyamoon.com/icomoon/ 2 | License: CC BY 3.0 -- http://creativecommons.org/licenses/by/3.0/ -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Expanding Search Bar Deconstructed 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 |
20 | Previous Demo 21 | Back to the Codrops Article 22 |
23 |
24 |

Expanding Search Bar Deconstructed A click-to-expand search input

25 |
26 |
27 | 28 |
29 |

The search bar can be opened on click, it has a fluid width and it's mobile-friendly.

30 |

Read the tutorial

31 |
32 |
33 | 40 |
41 |
42 |
43 | 44 | 45 | 48 | 49 | -------------------------------------------------------------------------------- /js/classie.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * classie - class helper functions 3 | * from bonzo https://github.com/ded/bonzo 4 | * 5 | * classie.has( elem, 'my-class' ) -> true/false 6 | * classie.add( elem, 'my-new-class' ) 7 | * classie.remove( elem, 'my-unwanted-class' ) 8 | * classie.toggle( elem, 'my-class' ) 9 | */ 10 | 11 | /*jshint browser: true, strict: true, undef: true */ 12 | /*global define: false */ 13 | 14 | ( function( window ) { 15 | 16 | 'use strict'; 17 | 18 | // class helper functions from bonzo https://github.com/ded/bonzo 19 | 20 | function classReg( className ) { 21 | return new RegExp("(^|\\s+)" + className + "(\\s+|$)"); 22 | } 23 | 24 | // classList support for class management 25 | // altho to be fair, the api sucks because it won't accept multiple classes at once 26 | var hasClass, addClass, removeClass; 27 | 28 | if ( 'classList' in document.documentElement ) { 29 | hasClass = function( elem, c ) { 30 | return elem.classList.contains( c ); 31 | }; 32 | addClass = function( elem, c ) { 33 | elem.classList.add( c ); 34 | }; 35 | removeClass = function( elem, c ) { 36 | elem.classList.remove( c ); 37 | }; 38 | } 39 | else { 40 | hasClass = function( elem, c ) { 41 | return classReg( c ).test( elem.className ); 42 | }; 43 | addClass = function( elem, c ) { 44 | if ( !hasClass( elem, c ) ) { 45 | elem.className = elem.className + ' ' + c; 46 | } 47 | }; 48 | removeClass = function( elem, c ) { 49 | elem.className = elem.className.replace( classReg( c ), ' ' ); 50 | }; 51 | } 52 | 53 | function toggleClass( elem, c ) { 54 | var fn = hasClass( elem, c ) ? removeClass : addClass; 55 | fn( elem, c ); 56 | } 57 | 58 | var classie = { 59 | // full names 60 | hasClass: hasClass, 61 | addClass: addClass, 62 | removeClass: removeClass, 63 | toggleClass: toggleClass, 64 | // short names 65 | has: hasClass, 66 | add: addClass, 67 | remove: removeClass, 68 | toggle: toggleClass 69 | }; 70 | 71 | // transport 72 | if ( typeof define === 'function' && define.amd ) { 73 | // AMD 74 | define( classie ); 75 | } else { 76 | // browser global 77 | window.classie = classie; 78 | } 79 | 80 | })( window ); 81 | -------------------------------------------------------------------------------- /js/modernizr.custom.js: -------------------------------------------------------------------------------- 1 | /* Modernizr 2.6.2 (Custom Build) | MIT & BSD 2 | * Build: http://modernizr.com/download/#-shiv-cssclasses-load 3 | */ 4 | ;window.Modernizr=function(a,b,c){function u(a){j.cssText=a}function v(a,b){return u(prefixes.join(a+";")+(b||""))}function w(a,b){return typeof a===b}function x(a,b){return!!~(""+a).indexOf(b)}function y(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:w(f,"function")?f.bind(d||b):f}return!1}var d="2.6.2",e={},f=!0,g=b.documentElement,h="modernizr",i=b.createElement(h),j=i.style,k,l={}.toString,m={},n={},o={},p=[],q=p.slice,r,s={}.hasOwnProperty,t;!w(s,"undefined")&&!w(s.call,"undefined")?t=function(a,b){return s.call(a,b)}:t=function(a,b){return b in a&&w(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=q.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(q.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(q.call(arguments)))};return e});for(var z in m)t(m,z)&&(r=z.toLowerCase(),e[r]=m[z](),p.push((e[r]?"":"no-")+r));return e.addTest=function(a,b){if(typeof a=="object")for(var d in a)t(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,typeof f!="undefined"&&f&&(g.className+=" "+(b?"":"no-")+a),e[a]=b}return e},u(""),i=k=null,function(a,b){function k(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x",d.insertBefore(c.lastChild,d.firstChild)}function l(){var a=r.elements;return typeof a=="string"?a.split(" "):a}function m(a){var b=i[a[g]];return b||(b={},h++,a[g]=h,i[h]=b),b}function n(a,c,f){c||(c=b);if(j)return c.createElement(a);f||(f=m(c));var g;return f.cache[a]?g=f.cache[a].cloneNode():e.test(a)?g=(f.cache[a]=f.createElem(a)).cloneNode():g=f.createElem(a),g.canHaveChildren&&!d.test(a)?f.frag.appendChild(g):g}function o(a,c){a||(a=b);if(j)return a.createDocumentFragment();c=c||m(a);var d=c.frag.cloneNode(),e=0,f=l(),g=f.length;for(;e",f="hidden"in a,j=a.childNodes.length==1||function(){b.createElement("a");var a=b.createDocumentFragment();return typeof a.cloneNode=="undefined"||typeof a.createDocumentFragment=="undefined"||typeof a.createElement=="undefined"}()}catch(c){f=!0,j=!0}})();var r={elements:c.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",shivCSS:c.shivCSS!==!1,supportsUnknownElements:j,shivMethods:c.shivMethods!==!1,type:"default",shivDocument:q,createElement:n,createDocumentFragment:o};a.html5=r,q(b)}(this,b),e._version=d,g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+p.join(" "):""),e}(this,this.document),function(a,b,c){function d(a){return"[object Function]"==o.call(a)}function e(a){return"string"==typeof a}function f(){}function g(a){return!a||"loaded"==a||"complete"==a||"uninitialized"==a}function h(){var a=p.shift();q=1,a?a.t?m(function(){("c"==a.t?B.injectCss:B.injectJs)(a.s,0,a.a,a.x,a.e,1)},0):(a(),h()):q=0}function i(a,c,d,e,f,i,j){function k(b){if(!o&&g(l.readyState)&&(u.r=o=1,!q&&h(),l.onload=l.onreadystatechange=null,b)){"img"!=a&&m(function(){t.removeChild(l)},50);for(var d in y[c])y[c].hasOwnProperty(d)&&y[c][d].onload()}}var j=j||B.errorTimeout,l=b.createElement(a),o=0,r=0,u={t:d,s:c,e:f,a:i,x:j};1===y[c]&&(r=1,y[c]=[]),"object"==a?l.data=c:(l.src=c,l.type=a),l.width=l.height="0",l.onerror=l.onload=l.onreadystatechange=function(){k.call(this,r)},p.splice(e,0,u),"img"!=a&&(r||2===y[c]?(t.insertBefore(l,s?null:n),m(k,j)):y[c].push(l))}function j(a,b,c,d,f){return q=0,b=b||"j",e(a)?i("c"==b?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),1==p.length&&h()),this}function k(){var a=B;return a.loader={load:j,i:0},a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={}.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=s?l:n.parentNode,l=a.opera&&"[object Opera]"==o.call(a.opera),l=!!b.attachEvent&&!l,u=r?"object":l?"script":"img",v=l?"script":u,w=Array.isArray||function(a){return"[object Array]"==o.call(a)},x=[],y={},z={timeout:function(a,b){return b.length&&(a.timeout=b[0]),a}},A,B;B=function(a){function b(a){var a=a.split("!"),b=x.length,c=a.pop(),d=a.length,c={url:c,origUrl:c,prefixes:a},e,f,g;for(f=0;f input.sb-search-input' ); 84 | this._initEvents(); 85 | } 86 | 87 | UISearch.prototype = { 88 | _initEvents : function() { 89 | var self = this, 90 | initSearchFn = function( ev ) { 91 | ev.stopPropagation(); 92 | // trim its value 93 | self.inputEl.value = self.inputEl.value.trim(); 94 | 95 | if( !classie.has( self.el, 'sb-search-open' ) ) { // open it 96 | ev.preventDefault(); 97 | self.open(); 98 | } 99 | else if( classie.has( self.el, 'sb-search-open' ) && /^\s*$/.test( self.inputEl.value ) ) { // close it 100 | ev.preventDefault(); 101 | self.close(); 102 | } 103 | } 104 | 105 | this.el.addEventListener( 'click', initSearchFn ); 106 | this.el.addEventListener( 'touchstart', initSearchFn ); 107 | this.inputEl.addEventListener( 'click', function( ev ) { ev.stopPropagation(); }); 108 | this.inputEl.addEventListener( 'touchstart', function( ev ) { ev.stopPropagation(); } ); 109 | }, 110 | open : function() { 111 | var self = this; 112 | classie.add( this.el, 'sb-search-open' ); 113 | // focus the input 114 | if( !mobilecheck() ) { 115 | this.inputEl.focus(); 116 | } 117 | // close the search input if body is clicked 118 | var bodyFn = function( ev ) { 119 | self.close(); 120 | this.removeEventListener( 'click', bodyFn ); 121 | this.removeEventListener( 'touchstart', bodyFn ); 122 | }; 123 | document.addEventListener( 'click', bodyFn ); 124 | document.addEventListener( 'touchstart', bodyFn ); 125 | }, 126 | close : function() { 127 | this.inputEl.blur(); 128 | classie.remove( this.el, 'sb-search-open' ); 129 | } 130 | } 131 | 132 | // add to global namespace 133 | window.UISearch = UISearch; 134 | 135 | } )( window ); --------------------------------------------------------------------------------