src/modules/Search/Search.js
A search can display a set of results.
{ "loading": false, "results": [], "value": "" }
[ { "title": "Bailey, Kemmer and Cummings", "description": "Horizontal tangible archive", "image": "https://s3.amazonaws.com/uifaces/faces/twitter/bowbrick/128.jpg", "price": "$2.64" }, { "title": "Shanahan, Cassin and Trantow", "description": "Synchronised full-range open system", "image": "https://s3.amazonaws.com/uifaces/faces/twitter/flashmurphy/128.jpg", "price": "$50.76" }, { "title": "Nienow, Nader and Lesch", "description": "Realigned 24/7 protocol", "image": "https://s3.amazonaws.com/uifaces/faces/twitter/javorszky/128.jpg", "price": "$80.76" }, { "title": "Maggio and Sons", "description": "Versatile static workforce", "image": "https://s3.amazonaws.com/uifaces/faces/twitter/codepoet_ru/128.jpg", "price": "$40.64" }, { "title": "Auer - Toy", "description": "Synchronised intangible knowledge user", "image": "https://s3.amazonaws.com/uifaces/faces/twitter/uberschizo/128.jpg", "price": "$8.70" } ]
A search can have a custom rendering.
{ "loading": false, "results": [], "value": "" }
[ { "title": "Beier, Welch and Carroll", "description": "Face to face national function", "image": "https://s3.amazonaws.com/uifaces/faces/twitter/imsoper/128.jpg", "price": "$46.98" }, { "title": "Fahey, Murphy and Kirlin", "description": "Upgradable attitude-oriented open system", "image": "https://s3.amazonaws.com/uifaces/faces/twitter/alessandroribe/128.jpg", "price": "$73.29" }, { "title": "Zemlak LLC", "description": "Sharable interactive interface", "image": "https://s3.amazonaws.com/uifaces/faces/twitter/tur8le/128.jpg", "price": "$9.19" }, { "title": "Schinner Inc", "description": "User-friendly background database", "image": "https://s3.amazonaws.com/uifaces/faces/twitter/smaczny/128.jpg", "price": "$49.61" }, { "title": "Will, Olson and Weber", "description": "Optimized 24 hour analyzer", "image": "https://s3.amazonaws.com/uifaces/faces/twitter/marciotoledo/128.jpg", "price": "$81.92" } ]
A search can display results from remote content ordered by categories.
{ "isLoading": false, "results": [], "value": "" }
{ "application": { "name": "application", "results": [ { "title": "Stark - Nitzsche", "description": "Multi-channelled 3rd generation capability", "image": "https://s3.amazonaws.com/uifaces/faces/twitter/chadengle/128.jpg", "price": "$25.10" }, { "title": "Goyette, Rogahn and Quigley", "description": "Multi-layered leading edge paradigm", "image": "https://s3.amazonaws.com/uifaces/faces/twitter/leemunroe/128.jpg", "price": "$27.08" }, { "title": "McLaughlin and Sons", "description": "Monitored incremental portal", "image": "https://s3.amazonaws.com/uifaces/faces/twitter/supervova/128.jpg", "price": "$41.96" }, { "title": "Mraz, Rath and Cronin", "description": "Extended human-resource product", "image": "https://s3.amazonaws.com/uifaces/faces/twitter/krasnoukhov/128.jpg", "price": "$51.03" }, { "title": "Fay, Rodriguez and Quitzon", "description": "Future-proofed foreground array", "image": "https://s3.amazonaws.com/uifaces/faces/twitter/lososina/128.jpg", "price": "$92.39" } ] }, "array": { "name": "array", "results": [ { "title": "Aufderhar LLC", "description": "Secured methodical knowledge user", "image": "https://s3.amazonaws.com/uifaces/faces/twitter/liminha/128.jpg", "price": "$94.29" }, { "title": "Powlowski, Corkery and Lakin", "description": "Operative 6th generation standardization", "image": "https://s3.amazonaws.com/uifaces/faces/twitter/mohanrohith/128.jpg", "price": "$46.14" }, { "title": "Brown - Greenfelder", "description": "Robust systemic infrastructure", "image": "https://s3.amazonaws.com/uifaces/faces/twitter/dshster/128.jpg", "price": "$21.49" }, { "title": "Prohaska, Kertzmann and Trantow", "description": "Object-based foreground artificial intelligence", "image": "https://s3.amazonaws.com/uifaces/faces/twitter/S0ufi4n3/128.jpg", "price": "$81.40" }, { "title": "Walsh, Quigley and Bergnaum", "description": "Fundamental mobile function", "image": "https://s3.amazonaws.com/uifaces/faces/twitter/demersdesigns/128.jpg", "price": "$1.47" } ] }, "circuit": { "name": "circuit", "results": [ { "title": "Will, Koelpin and Torp", "description": "Intuitive eco-centric methodology", "image": "https://s3.amazonaws.com/uifaces/faces/twitter/itskawsar/128.jpg", "price": "$31.37" }, { "title": "Morar - Robel", "description": "Self-enabling static approach", "image": "https://s3.amazonaws.com/uifaces/faces/twitter/saulihirvi/128.jpg", "price": "$8.22" }, { "title": "Haag LLC", "description": "Versatile logistical customer loyalty", "image": "https://s3.amazonaws.com/uifaces/faces/twitter/desastrozo/128.jpg", "price": "$24.21" }, { "title": "Wilderman Group", "description": "Exclusive optimal superstructure", "image": "https://s3.amazonaws.com/uifaces/faces/twitter/edhenderson/128.jpg", "price": "$89.05" }, { "title": "Reynolds - Roob", "description": "Automated high-level contingency", "image": "https://s3.amazonaws.com/uifaces/faces/twitter/tristanlegros/128.jpg", "price": "$41.02" } ] } }
A category search can have a custom rendering.
{ "isLoading": false, "results": [], "value": "" }
{ "system": { "name": "system", "results": [ { "title": "Bernier, Volkman and Smitham", "description": "Reduced dynamic internet solution", "image": "https://s3.amazonaws.com/uifaces/faces/twitter/spbroma/128.jpg", "price": "$13.37" }, { "title": "Walsh and Sons", "description": "Expanded systematic hub", "image": "https://s3.amazonaws.com/uifaces/faces/twitter/bassamology/128.jpg", "price": "$39.74" }, { "title": "Walsh, Luettgen and Feil", "description": "Profit-focused bandwidth-monitored instruction set", "image": "https://s3.amazonaws.com/uifaces/faces/twitter/brenmurrell/128.jpg", "price": "$27.55" }, { "title": "Bruen and Sons", "description": "Right-sized homogeneous software", "image": "https://s3.amazonaws.com/uifaces/faces/twitter/kinday/128.jpg", "price": "$80.67" }, { "title": "Gusikowski - Murphy", "description": "Customer-focused background success", "image": "https://s3.amazonaws.com/uifaces/faces/twitter/mufaddal_mw/128.jpg", "price": "$87.80" } ] }, "application": { "name": "application", "results": [ { "title": "Batz and Sons", "description": "Synergized encompassing projection", "image": "https://s3.amazonaws.com/uifaces/faces/twitter/fronx/128.jpg", "price": "$62.55" }, { "title": "Connelly and Sons", "description": "Re-contextualized actuating framework", "image": "https://s3.amazonaws.com/uifaces/faces/twitter/sebashton/128.jpg", "price": "$98.29" }, { "title": "Murphy - Fahey", "description": "Up-sized mobile paradigm", "image": "https://s3.amazonaws.com/uifaces/faces/twitter/thekevinjones/128.jpg", "price": "$78.40" }, { "title": "Stark - Bosco", "description": "Up-sized executive functionalities", "image": "https://s3.amazonaws.com/uifaces/faces/twitter/dawidwu/128.jpg", "price": "$69.81" }, { "title": "Mayer - Wolf", "description": "Enterprise-wide discrete structure", "image": "https://s3.amazonaws.com/uifaces/faces/twitter/haligaliharun/128.jpg", "price": "$8.96" } ] }, "transmitter": { "name": "transmitter", "results": [ { "title": "Graham, Senger and Lindgren", "description": "Enterprise-wide dynamic budgetary management", "image": "https://s3.amazonaws.com/uifaces/faces/twitter/michzen/128.jpg", "price": "$97.16" }, { "title": "Stehr - Romaguera", "description": "Intuitive non-volatile frame", "image": "https://s3.amazonaws.com/uifaces/faces/twitter/yalozhkin/128.jpg", "price": "$7.51" }, { "title": "Mosciski - Lesch", "description": "Networked multi-tasking data-warehouse", "image": "https://s3.amazonaws.com/uifaces/faces/twitter/vladyn/128.jpg", "price": "$51.21" }, { "title": "Hintz, Leffler and Leannon", "description": "Multi-lateral background solution", "image": "https://s3.amazonaws.com/uifaces/faces/twitter/ManikRathee/128.jpg", "price": "$75.36" }, { "title": "Monahan - Berge", "description": "Integrated radical attitude", "image": "https://s3.amazonaws.com/uifaces/faces/twitter/rodnylobos/128.jpg", "price": "$0.87" } ] } }
A search can have its results take up the width of its container.
{ "isLoading": false, "results": [], "value": "" }
[ { "title": "Sanford and Sons", "description": "Extended composite methodology", "image": "https://s3.amazonaws.com/uifaces/faces/twitter/olgary/128.jpg", "price": "$62.98" }, { "title": "Rempel - Jerde", "description": "Enterprise-wide eco-centric definition", "image": "https://s3.amazonaws.com/uifaces/faces/twitter/laasli/128.jpg", "price": "$16.81" }, { "title": "Greenholt, Ruecker and Batz", "description": "Multi-layered tangible success", "image": "https://s3.amazonaws.com/uifaces/faces/twitter/hai_ninh_nguyen/128.jpg", "price": "$0.64" }, { "title": "Sipes Inc", "description": "Cloned impactful contingency", "image": "https://s3.amazonaws.com/uifaces/faces/twitter/michaelcolenso/128.jpg", "price": "$70.25" }, { "title": "Abshire and Sons", "description": "Fully-configurable bandwidth-monitored groupware", "image": "https://s3.amazonaws.com/uifaces/faces/twitter/sunlandictwin/128.jpg", "price": "$64.92" } ]
A search can have its results aligned to its left or right container edge.
{ "isLoading": false, "results": [], "value": "" }
[ { "title": "Klein, Jast and Waelchi", "description": "Reverse-engineered dedicated core", "image": "https://s3.amazonaws.com/uifaces/faces/twitter/digitalmaverick/128.jpg", "price": "$96.51" }, { "title": "Zemlak - Schroeder", "description": "Universal leading edge internet solution", "image": "https://s3.amazonaws.com/uifaces/faces/twitter/judzhin_miles/128.jpg", "price": "$59.75" }, { "title": "McCullough, Blanda and Jacobi", "description": "Balanced contextually-based groupware", "image": "https://s3.amazonaws.com/uifaces/faces/twitter/axel/128.jpg", "price": "$76.19" }, { "title": "Nolan LLC", "description": "Configurable object-oriented approach", "image": "https://s3.amazonaws.com/uifaces/faces/twitter/joshuaraichur/128.jpg", "price": "$68.70" }, { "title": "Collier LLC", "description": "Self-enabling asynchronous time-frame", "image": "https://s3.amazonaws.com/uifaces/faces/twitter/ryuchi311/128.jpg", "price": "$81.69" } ]
A search can receive an input via shorthand props.