How do I display suggestions using ajax, jquery and smarty MVC?

See more:

Ajax

MVC

jQuery

I am currently using MVC and Smarty to create this.

I have no idea how to display the suggestions for autocomplete in smarty.

Suppose when you type something in the input field, there will be some autocomplete suggestions. and the suggestions are taken from database.

I've also tried some ajax and jquery codes i've found online and suit them to my codes, but still not working, no suggestion found

can someone please help me? thank you so much in advance!

Please tell me if you need more info on this.

What I have tried:

This is the code for my field in index.tpl

<input autocomplete="off" name="str" class="form-control form-control-sm" type="search" placeholder="{language->show langcode='Carian'}" aria-label="Search" id="DATETYPE_1">

Below is my code for the model.php(assuming db is already connected)

function getCarian(){
		$sql	= "SELECT cm_desc FROM gp_cms_webmenu WHERE cm_showin = 1";
		$input	= array();
		$stmt	= $this->DB->Prepare($sql);
		$rs		= $this->DB->Execute($stmt, $input);
		if($rs) {
			$rows = array();
			if(!$rs->EOF) {
				while ($results = $rs->fetchInto($row,DB_FETCHMODE_ASSOC)) {
					$rows[] = array("desc" => $row['cm_desc']);
				}
				return $rows;
			}
		}

and this is my controller.php code

public function CarianAjax(){
		$getData = $this->Model->getCarian();
		
		foreach($getData as $data){
			$desc = array("cm_desc");
			$getCarian[] = array("desc" => $desc);
		}

		foreach($getData as $data){
			$getCarian[] = $data;
		}

	}

Here is what i've tried in the .tpl file to display data

$(document).ready(function(){
       $("#DATETYPE_1").keyup(function(){
         $.ajax({
         type: "get",
         url: "index.php?modload=system&action=6000",
         data:'keyword='+$(this).val(),
         beforeSend: function(){
           $("#DATETYPE_1").css("background","#FFF url(LoaderIcon.gif) no-repeat 165px");
         },

         success: function(data){
           //$("#suggesstion-box").show();
           //$("#suggesstion-box").html(data);
           $("#DATETYPE_1").css("background","#FFF");
           console.log(data);
         }
         });
       });
     });
     //To select country name
     function selectCountry(val) {
     $("#DATETYPE_1").val(val);
     $("#suggesstion-box").hide();
     }