How to handle variable inside javascript

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(){
    $('document').ready(function(){ 
    var x = document.getElementById("cit");
    $('#resdiv').load('results.php?cit=x.value');

    });
}
</script>

 <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('conew.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 Javacsript function is appended to the load paramater 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 autocomplete kind of results.

I am not very good at jquery. And I am totally self taught in all this. Please don't downvote the question !