How to handle variable inside javascript

Question

I am trying to amateurishly create an autocomplete input field with jquery. My first step is to get some results displayed below the input field by calling a php script on keyup with the load function of jquery.

I dont know how silly this attempt is, but i think i am almost there. However, I am stuck during passing the keyup variable to the script. Actually I can passa a variable but i need to use the keyup variable to pass.

For clarity on the question please see the code;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
function getres(){
    var x = document.getElementById("cit");
    $('#resdiv').load('results.php?cit=x.value');
}
</script>

HTML

 <input type="" name="" id="cit" onkeyup="getres()">
<div id='resdiv'></div>

PHP file being called results.php

<?php

if(isset($_GET['cit'])){echo $_GET['cit']."<br>";}
include('connnew.php');
$getprops=$clientdb->query("SELECT * FROM cities ORDER BY DATE LIMIT 6");

while($info=$getprops->fetch_assoc()){
    //$results[]=$info['city'];
    echo $info['city']."<br>";
}

?>

I m able to get the results in the div below with id resdiv. But the problem is, how do I ensure the value of Var X in the JavaScript function is appended to the load parameter results.php?cit= ?

I get 'x.value' being passed rather than the actual value of x. I think once I do that, eventually I can match the variable to the results array and show matching auto-complete kind of results.

Answer 1

You need to put x.value outside your quotes as that's a variable. You can make your code much shorter than it currently is. You should not have any issues with following way:

$("#cit").on("keyup", function(){
    var x = document.getElementById("cit").value;
    $('#resdiv').load('results.php?cit='+x.value);
});//

<input type="" name="" id="cit">
<div id='resdiv'></div>