how is associated to datepicker with ajax livesearch

I have a problem and I would be glad if you help. I want to use datepicker and ajax livesearch together in the website for searchbox. When the date is entered in the searchbox manually, it is added to the searchbox and Search is concluded. if I select the date from the datepicker, it shows in the searchbox but the livesearch is not working or does not search. as I understand the result of datepicker is not processed by livesearch. I think I need a javascript to get data from each other, but I can't. I'm waiting for your help. The following codes are relevant. thank you.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.min.css" rel="stylesheet"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	
<script>
function showResult(str) {
  if (str.length==0) { 
    document.getElementById("livesearch").innerHTML="";
    document.getElementById("livesearch").style.border="0px";
    return;
  }
  if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
  } else {  // code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function() {
    if (this.readyState==4 && this.status==200) {
      document.getElementById("livesearch").innerHTML=this.responseText;
      document.getElementById("livesearch").style.border="1px solid #A5ACB2";
    }
  }
  xmlhttp.open("GET","livesearch.php?q="+str,true);
  xmlhttp.send();
}
</script>
</head>
	<body>

<div class="container">
    <div class="row" style="padding-top: 10px">
        <div class="col">
            <input type="text" size="30" onkeyup="showResult(this.value)" id="datepicker">
        </div>
		<div id="livesearch"></div>
    </div>
 </div>
		

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type="text/javascript">
    $('#datepicker').datepicker({
        weekStart: 1,
        daysOfWeekHighlighted: "6,0",
        autoclose: true,
        todayHighlight: true,
		format: "dd.mm.yyyy",
		clearBtn: true,
        language:  'tr',
        todayBtn:  true,
		autoclose: false,
		dayofweekhiglight: true,
    });
    $('#datepicker').datepicker("setDate", new Date());
	

	
</script>
</body>
</html>

Solution

The bootstrap datepicker has a changeDate event you can use to call your showResult function. See https://bootstrap-datepicker.readthedocs.io/en/latest/events.html#changedate