Website Search

This article covers how to add search functionality to your website.

Included Default Search Page

Oncord websites include a general-use system page capable of search at the location:
www.yourwebsite.com/search/ 

You can add a link from elsewhere on your site to this page:

<a href="/search/">Search</a> <a href="/search/?query=foo">Search</a>


Or embed a form with an editbox which submits the query to this page:

<forms:form id="searchform" method="get" action="/search/" > <forms:editbox id="query" placeholder="Search..." /> <forms:submitlink class="searchButton"> <standard:icon library="fontawesome" iconname="magnifying-glass" iconstyle="solid" style="width: 16px; height: 16px"/> </forms:submitlink> </forms:form>

Overriding the Default Search Page

You can override the look and feel of the default search page by visiting:
/admin/website/pages/edit/?page_id=/search/

However, note that any changes to the default system page means that you will stop receiving system updates when we release improvements.

Adding a Link in Navigation

Normally, Oncord websites display navigation menus using the <navigation:primary /> tag. This will populate from pages in the main website tree.

To add the search function, you can add an extra item at the end of the list:

<navigation:primary rootpage="" includestyles="true" autopopulatelevel="3" preventwrap="true"> <navigation:item at="end" page="/search/"> <standard:icon iconstyle="solid" iconname="magnifying-glass" library="fontawesome" style="width: 15px; height: 15px; margin-top: -2px;" /> </navigation:item> </navigation:primary>


This preserves the auto-population of pages while adding an extra item for a search icon.

Searching via the API

Almost every component in Oncord implements the search() function which can be used to perform text searches.

<?php \Components\Website\Pages::search('foo'); \Components\Website\Posts::search('bar'); \Components\Commerce\Products::search('baz');


This function is typically invoked through a UI Control called a 'Data Repeater', which allows you to iterate over a set of data and display it in a customizable template. 

<templates:section> <h1>Search via Ajax</h1> <forms:form> <ajax:event id="search_ajaxevent" updateregions="search_ajaxregion" /> <forms:searchbox id="search_editbox" oninputajax="search_ajaxevent" autofocus="true" /> <br /> </forms:form> <ajax:region id="search_ajaxregion"> <data:repeater datasource="\Components\Website\Pages::search($search_editbox.value)" as="page"> <p><a href="[? $page['page_url'] ?]"><strong>[? $page['page_title'] ?]</strong></a></p> </data:repeater> </ajax:region> </templates:section>


Or via the datasearch attribute:

<templates:section> <h1>Search via Ajax</h1> <forms:form> <ajax:event id="search_ajaxevent" updateregions="search_ajaxregion" /> <forms:searchbox id="search_editbox" oninputajax="search_ajaxevent" autofocus="true" /> <br /> </forms:form> <ajax:region id="search_ajaxregion"> <data:repeater datasource="\Components\Website\Pages::getAll()" as="page" datasearch="[? $search_editbox.value ?]"> <p><a href="[? $page['page_url'] ?]"><strong>[? $page['page_title'] ?]</strong></a></p> </data:repeater> </ajax:region> </templates:section>


This can be used in conjunction with complex datafilters to achieve both filter and search functionality.