SOW : Search suggest
SOW plugins are part of Smarty Core, written from scratch!
src/js/sow.core/sow.input_suggest.js
Suggest JSON
Designed to be used as primary search (header).
Data is loaded via ajax, from a JSON file (static or generated by your backend)!
Ecommerce demos are using it!
<form action="#search-page"
method="GET"
data-autosuggest="on"
data-mode="json"
data-json-max-results="10"
data-json-related-title="Explore Smarty"
data-json-related-item-icon="fi fi-star-empty"
data-json-suggest-title="Suggestions for you"
data-json-suggest-noresult="No results for"
data-json-suggest-item-icon="fi fi-search"
data-json-suggest-min-score="5"
data-json-highlight-term='true'
data-contentType='application/json; charset=utf-8'
data-dataType='json'
data-container="#sow-search-container"
data-input-min-length="2"
data-input-delay="250"
data-related-keywords=""
data-related-url="_ajax/search_suggestion_json_related.json"
data-suggest-url="_ajax/search_suggestion_json_suggest.json"
data-related-action="related_get"
data-suggest-action="suggest_get"
class="js-ajax-search sow-search sow-search-mobile-float d-flex-1-1-auto m-0">
<div class="sow-search-input w-100">
<!-- rounded: form-control-pill -->
<div class="input-group-over d-flex align-items-center w-100 h-100 rounded form-control-pill">
<input placeholder="what are you looking today?" aria-label="what are you looking today?" name="s" type="text" class="form-control-sow-search form-control" value="" autocomplete="off">
<span class="sow-search-buttons">
<!-- search button -->
<button aria-label="Global Search" type="submit" class="btn shadow-none m-0 px-3 py-2 bg-transparent text-muted">
<i class="fi fi-search fs-5 m-0"></i>
</button>
<!-- close : mobile only (d-inline-block d-lg-none) -->
<a href="javascript:;" class="btn-sow-search-toggler btn btn-light shadow-none m-0 p-2 d-inline-block d-lg-none">
<i class="fi fi-close fs-5 m-0"></i>
</a>
</span>
</div>
</div>
<!-- search suggestion container -->
<div class="sow-search-container w-100 p-0 hide shadow-md" id="sow-search-container">
<div class="sow-search-container-wrapper">
<!-- main search container -->
<div class="sow-search-loader p-3 text-center hide">
<i class="fi fi-circle-spin fi-spin text-muted fs-1"></i>
</div>
<!--
AJAX CONTENT CONTAINER
SHOULD ALWAYS BE AS IT IS : NO COMMENTS OR EVEN SPACES!
--><div class="sow-search-content rounded w-100 scrollable-vertical"></div>
</div>
</div>
<!-- /search suggestion container -->
<!--
overlay combinations:
backdrop-dark
backdrop-light
overlay-dark opacity-* [1-9]
overlay-light opacity-* [1-9]
-->
<div class="sow-search-backdrop backdrop-dark hide"><!-- alternate: overlay-dark opacity-3 --></div>
</form>
[
{
"label": "Introduction",
"url": "index.html"
},{
"label": "Back to Landing",
"url": "../index.html"
},{
"label": "Admin : Layout 1",
"url": "../../html_admin/layout_1/"
},{
"label": "Admin : Layout 2",
"url": "../../html_admin/layout_2/"
},{
"label": "Admin : Layout 3",
"url": "../../html_admin/layout_3/"
},{
"label": "Admin : Layout 4",
"url": "../../html_admin/layout_4/"
}
]
Suggest HTML
You can design the content the way you want - this is the advantage over JSON!
Designed to be used as primary search (header).
Data is loaded via ajax, from a regular HTML (static or generated by your backend)!
<!--
action="..." not used by the plugin. Is the regular form action - the search result page when user click the search button (or press enter key).
data-autosuggest="on" "off" = turn off autosuggest
data-related-url="..." what user see first when click the search input (request url)
data-related-action="related_get" backend identifier for related
data-related-keywords="" optional, might be used according to user history, to send to the server favourite/predefined keywords so the first suggestion to be related.
This function is usually handled by the backed, so this is optional, in case there is no backend access for changes!
data-suggest-url="..." what user see when type (request url). Might be the same as data-related-url and controlled according to data-suggest-action.
data-suggest-action="suggest_get" backend identifier for autosuggest
data-input-min-length="2" minimum length/characters to activate autosuggest before sendint requests to the server
data-input-delay="300" user typing/keyup delay in ms, before sending the request to the server. usualy, 500ms is the average - so give a decent delay for typing before sending the request to the server.
data-container="..." the container where results are pushed by ajax (present in this html markup). Should remain as it is, if there is no reason to change the predefined id.
Related Format:
{"ajax":"true","action":"related_get","related_keywords":""}
Suggest Format:
{"ajax":"true","action":"suggest_get","user_keywords":"user keywords"}
NOTE: "ajax":"true" is added by the plugin so you can check as an extra param, if needed - like this:
if($_GET['ajax'] == 'true') {
// serve ajax results
} else {
// serve regular page results
}
-->
<form action="#search-page"
method="GET"
data-autosuggest="on"
data-container="#sow-search-container"
data-input-min-length="2"
data-input-delay="250"
data-related-keywords=""
data-related-url="_ajax/search_suggest_input.html"
data-suggest-url="_ajax/search_suggest_related.html"
data-related-action="related_get"
data-suggest-action="suggest_get"
class="js-ajax-search sow-search sow-search-mobile-float d-flex-1-1-auto m-0">
<div class="sow-search-input w-100">
<!-- rounded: form-control-pill -->
<div class="input-group-over d-flex align-items-center w-100 h-100 rounded form-control-pill">
<input placeholder="what are you looking today?" aria-label="what are you looking today?" name="s" type="text" class="form-control-sow-search form-control" value="" autocomplete="off">
<span class="sow-search-buttons">
<!-- search button -->
<button aria-label="Global Search" type="submit" class="btn shadow-none m-0 px-3 py-2 bg-transparent text-muted">
<i class="fi fi-search fs-5 m-0"></i>
</button>
<!-- close : mobile only (d-inline-block d-lg-none) -->
<a href="javascript:;" class="btn-sow-search-toggler btn btn-light shadow-none m-0 p-2 d-inline-block d-lg-none">
<i class="fi fi-close fs-5 m-0"></i>
</a>
</span>
</div>
</div>
<!-- search suggestion container -->
<div class="sow-search-container w-100 p-0 hide shadow-md" id="sow-search-container">
<div class="sow-search-container-wrapper">
<!-- main search container -->
<div class="sow-search-loader p-3 text-center hide">
<i class="fi fi-circle-spin fi-spin text-muted fs-1"></i>
</div>
<!--
AJAX CONTENT CONTAINER
SHOULD ALWAYS BE AS IT IS : NO COMMENTS OR EVEN SPACES!
--><div class="sow-search-content rounded w-100 scrollable-vertical"></div>
</div>
</div>
<!-- /search suggestion container -->
<!--
overlay combinations:
backdrop-dark
backdrop-light
overlay-dark opacity-* [1-9]
overlay-light opacity-* [1-9]
-->
<div class="sow-search-backdrop backdrop-dark hide"><!-- alternate: overlay-dark opacity-3 --></div>
</form>
Example of what the server should return
You can design the content the way you want. This is a simple list example!
<h3 class="p-4 m-0">Popular searches</h3>
<ul class="list-unstyled list-suggestion">
<li class="list-item">
<a href="#">
<span class="text-muted fw-medium float-end p-1">3 results</span>
<i class="fi fi-graph"></i> Graphic design
</a>
</li>
<li class="list-item">
<a href="#">
<span class="text-muted fw-medium float-end p-1">12 results</span>
<i class="fi fi-graph"></i> Graphic photoshop
</a>
</li>
<li class="list-item"><a href="#">Suggestion 3</a></li>
<li class="list-item"><a href="#">Suggestion 4</a></li>
<li class="list-item"><a href="#">Suggestion ...</a></li>
</ul>