SOW : Input suggest
SOW plugins are part of Smarty Core, written from scratch!
src/js/sow.core/sow.input_suggest.js
Suggest on click
<!--
See the console the Ajax request
Params sent to URL:
{ajax: "true", action: "input_suggest", key: "color", limit: 20}
Note:
data-input-suggest-name="color"
This attribute is optional, if not used,
name="..." attribute is used as key
-->
<div class="clearfix">
<input type="text" class="form-control form-control-sm input-suggest" value=""
data-input-suggest-mode="text"
data-input-suggest-name="color"
data-input-suggest-ajax-url="_ajax/input_suggest_text.json"
data-input-suggest-ajax-method="GET"
data-input-suggest-ajax-action="input_suggest"
data-input-suggest-ajax-limit="20">
</div>
["Red","Blue","Pink","Black","White","Green","Purple","Gold"]
Live search + append
<!--
See broswer console for Ajax request
Params sent to URL:
{ajax: "true", action: "input_search", key: "_USER_KEYWORDS_", limit: 20}
Note: in this demo, there are always the same results
because the active search is done by the backend!
-->
<div class="mb-3">
<!--
NOTE:
data-name="product_id[]"
Is used to generate hidden input fields for each item added to the list
If not provided, name="..." attribute is used!
If none of them found, "item[]" is used by default for input hidden fields!
-->
<input type="text" class="form-control input-suggest" id="input_product" value=""
placeholder="Product Search..."
data-name="product_id[]"
data-input-suggest-mode="append"
data-input-suggest-typing-delay="300"
data-input-suggest-typing-min-char="3"
data-input-suggest-append-container="#inputSuggestContainer"
data-input-suggest-ajax-url="_ajax/input_suggest_append.json"
data-input-suggest-ajax-method="GET"
data-input-suggest-ajax-action="input_search"
data-input-suggest-ajax-limit="20">
<small class="d-block text-muted">* min. 3 characters</small>
</div>
<!-- append data -->
<div id="inputSuggestContainer" class="sortable">
<!-- Preadded -->
<div class="p-1 clearfix rounded">
<a href="#" class="item-suggest-append-remove fi fi-close fs-6 float-start text-decoration-none"></a>
<span>Preadded Example</span>
<input type="hidden" name="product_id[]" value="1">
</div>
</div>
[
{
"label": "Nike Shoes (has link)",
"url": "https://www.google.com",
"id": "1",
"disabled": false
},{
"label": "Female Fancy Shoes",
"url": "#",
"id": "2",
"disabled": false
},{
"label": "Pink Shoes",
"url": "#",
"id": "3",
"disabled": false
},{
"label": "Nothing Found",
"url": "#",
"id": "0",
"disabled": true
}
]
/**
BACKEND EXAMPLE (PHP)
**/
if( $_GET['action'] == 'input_search' ) {
$keyword = $_GET['key'];
// ... search database
$sql_result = "SELECT * FROM product WHERE title LIKE '%{$keyword}%'";
// create array
foreach ( $sql_result as $item ) {
$list[] = [
'label' => $item['product_title'],
'url' => $item['permalink'],
'id' => $item['product_id'],
'disabled' => false,
];
}
// if no result
if ( !isset( $list ) ) {
$list[] = [
'label' => 'Not Found',
'url' => '#',
'id' => 0,
'disabled' => true,
];
}
// print data as json
header('Content-Type: application/json');
die( json_encode($list) );
}
Simple Suggest
* min. 2 characters
<!--
See the console for Ajax request
Params sent to URL:
{ajax: "true", action: "country_search", key: "_USER_KEYWORDS_", limit: 20}
Note: in this demo, there are always the same results
because the active search is done by the backend!
-->
<!--
NOTE:
data-name="product_id[]"
Is used to generate hidden input fields for each item added to the list
If not provided, name="..." attribute is used!
If none of them found, "item[]" is used by default for input hidden fields!
-->
<input type="text" class="form-control input-suggest" id="input_search_country" value=""
placeholder="Country Search..."
data-input-suggest-mode="self"
data-input-suggest-typing-delay="300"
data-input-suggest-typing-min-char="2"
data-input-suggest-ajax-url="_ajax/country_list.json"
data-input-suggest-ajax-method="GET"
data-input-suggest-ajax-action="country_search"
data-input-suggest-ajax-limit="20">
[
{
"label":"Afghanistan",
"disabled":false
},
{
"label":"Aland Islands",
"disabled":false
},
{
"label":"Albania",
"disabled":false
},
{
"label":"Algeria",
"disabled":false
}
]
/**
BACKEND EXAMPLE (PHP)
**/
if( $_GET['action'] == 'input_search' ) {
$keyword = $_GET['key'];
// ... search database
$sql_result = "SELECT * FROM country WHERE country_name LIKE '%{$keyword}%'";
// create array
foreach ( $sql_result as $item ) {
$list[] = [
'label' => $item['country_name'],
'disabled' => false,
];
}
// if no result
if ( !isset( $list ) ) {
$list[] = [
'label' => 'Not Found',
'disabled' => true,
];
}
// print data as json
header('Content-Type: application/json');
die( json_encode($list) );
}