{"id":767,"date":"2018-05-15T16:44:22","date_gmt":"2018-05-15T16:44:22","guid":{"rendered":"https:\/\/sites.neoninspire.com\/style-guide\/?page_id=767"},"modified":"2018-05-31T22:54:42","modified_gmt":"2018-05-31T22:54:42","slug":"usage","status":"publish","type":"page","link":"https:\/\/sites.neoninspire.com\/style-guide\/components\/search-field\/usage\/","title":{"rendered":"Search Field usage"},"content":{"rendered":"<p>Components<\/p>\n<h1>\n\t\tSearch<br \/>\n\t<\/h1>\n<h2>\n\t\tOverview<br \/>\n\t<\/h2>\n<h4>\n\t\tSearch fields provide a quick and easy way to access content and features within the neon framework by inputing keywords and returning results based on that content input.<br \/>\n\t<\/h4>\n<p>Use a search field, when a user needs to query information about addresses, transaction types, filter table information, and account ID&#8217;s.<\/p>\n<h2>\n\t\tTypes<br \/>\n\t<\/h2>\n<h4>\n\t\t<a href=\"#\" title=\"Global Search\" target=\"_self\"><br \/>\n\t\tGlobal Search<br \/>\n\t\t<\/a><br \/>\n\t<\/h4>\n<p><b>Global Search<\/b> is present throughout the entire Neon ecosystem. The global search field is in the upper left of the toolbar. This search field is useful for identifying accounts, searching for an activity, and accessing subsections in Neon.<\/p>\n<h4>\n\t\t<a href=\"#\" title=\"Filter Search\" target=\"_self\"><br \/>\n\t\tFilter Search<br \/>\n\t\t<\/a><br \/>\n\t<\/h4>\n<p><strong>Filter Search<\/strong> allows users to search for a large number of filterable items in an efficient manner.<\/p>\n<h2>\n\t\tBest Practices<br \/>\n\t<\/h2>\n<h4>\n\t\t<a href=\"#\" title=\"Do\" target=\"_self\"><br \/>\n\t\tDo<br \/>\n\t\t<\/a><br \/>\n\t<\/h4>\n<ul>\n<li>Use placeholder text in the SearchBox to describe what users can search for. Example: &#8220;Search&#8221;; &#8220;Search accounts&#8221;; &#8220;Search donations&#8221;<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul>\n<li>Provide autocomplete suggestions to help the user search quickly. These suggestions can be from past searches or auto-completions of the user&#8217;s query text.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul>\n<li>Provide autocomplete suggestions where there are strong matches to the user&#8217;s query that the user may want to view immediately.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h4>\n\t\t<a href=\"#\" title=\"Don&#039;t\" target=\"_self\"><br \/>\n\t\tDon&#8217;t<br \/>\n\t\t<\/a><br \/>\n\t<\/h4>\n<ul>\n<li>Don&#8217;t leave the SearchBox blank because it&#8217;s too ambiguous.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul>\n<li>Don&#8217;t have lengthy and unclear hint text. It should be used to clarify and set expectations.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul>\n<li>Don&#8217;t provide too many autocomplete suggestions, as that will overwhelm the user.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul>\n<li>Don&#8217;t provide inaccurate matches or bad predictions, as it will make search seem unreliable and will result in user frustration.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul>\n<li>Don\u2019t provide too much information or metadata in the suggestions list; it\u2019s intended to be lightweight.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul>\n<li>Don\u2019t use an autocomplete dropdown for something that has one choice; there must be more than one item.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul>\n<li>Don&#8217;t use SearchBox if you cannot reliably provide accurate results.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Components Search Overview Search fields provide a quick and easy way to access content and features within the neon framework by inputing keywords and returning results based on that content input. Use a search field, when a user needs to query information about addresses, transaction types, filter table information, and account ID&#8217;s. Types Global Search&hellip;<\/p>\n","protected":false},"author":32,"featured_media":0,"parent":44,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-767","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages\/767","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/users\/32"}],"replies":[{"embeddable":true,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/comments?post=767"}],"version-history":[{"count":4,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages\/767\/revisions"}],"predecessor-version":[{"id":1044,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages\/767\/revisions\/1044"}],"up":[{"embeddable":true,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages\/44"}],"wp:attachment":[{"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/media?parent=767"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}