issue passing space with jquery On KeyUp function

Question

I have the following code. What I am trying to do is create a drop down of matching contacts from my database while typing the name in the input box. I capture the input variables as i type and pass it to a php file which processes it and load it to a result div.

I have succeeded. However, I am not able to pass space as value when I want to type names with space between them. When I do that, it doesn't work.

For ex: I type 'John' ...all similar names like John is listed. But when I type 'John Smith', nothing lists because of the space between the words.

So the question is obvious. How do I make the space also get passed. So that 'John Smith' results are displayed. I guess I may have to pass it as %20 . But what I tried is below. And it is not working. I do the passing of input value with the 'getcont()' function in the script. That is where I am stuck. I am sure it is a simple jquery solution. But I am an amateur at Jquery. Please advice.

<style>
  #contdiv{display:none}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" async>    </script>

<script>
$('document').ready(function(){
        $('#contdiv').on('click', '.pno', function(){
        var value = $(this).html();
        var input = $('#cit');
        input.val(value);
        $('#contdiv').fadeOut('fast');  
  });       
});

function getcont(){
    var x = document.getElementById("cit");
    if(x==" "){x="%20";}
    $('#contdiv').fadeIn('fast').load('searchconts.php?cit='+x.value);
}

</script>
<div class="admininner">
<h3>Search Contacts on Phone</h3>
<input type="text" name="phone" id="cit" class="contdiv" onkeyup="getcont()" placeholder="Type to search">
<p id="contdiv"></p>
</div>

Answer 1

function getcont(){
    var x = document.getElementById("cit");
    x=encodeURI(x.value);
    $('#contdiv').fadeIn('fast').load('searchconts.php?cit='+x);
}