SOW : Core Plugins

<!-- 
	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

	Dependencies: 	SOW : Inline Search (Optional)
					Use to filter when user is typing!

-->


<!-- simple -->
<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>


<!-- with label -->
<div class="form-label-group mb-3">
	<input id="input_color" type="text" class="form-control input-suggest" value="" 
		placeholder="Color" 
		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">
	<label for="input_color">Color</label>
</div>
											

<!-- 
	See the 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="form-label-group 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">
	<label for="input_product">Product Search...</label>
	<small class="d-block text-muted">* min. 3 characters</small>
</div>

<!-- append data -->
<div id="inputSuggestContainer" class="sortable">

	<!-- Preadded -->
	<div class="p-1 clearfix">
		<a href="#!" class="item-suggest-append-remove fi fi-close fs--16 float-start text-decoration-none"></a>
		<span>Preadded Example</span>
		<input type="hidden" name="product_id[]" value="1">
	</div>

</div>
											

/**
	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'		=> 'Product Title',
				'url'		=> 'https://domain.com/url',	// or '#'
				'id'		=> 1,	// 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) );
	}

											

<!-- 
	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!

-->

<div class="form-label-group mb-3">
	<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 for="input_search_country">Country Search...</label>
	<small class="d-block text-muted">* min. 2 characters</small>
</div>

											

/**
	BACKEND EXAMPLE (PHP)
**/
	if($_GET['action'] == 'country_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'		=> 'United States',
				'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) );
	}