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.