javascript - 使用 jquery On KeyUp 函数传递空间问题

Question

我有以下代码。我想要做的是在输入框中输入姓名时从我的数据库中创建匹配联系人的下拉列表。我在输入时捕获输入变量，并将其传递到 php 文件，该文件处理它并将其加载到结果 div。

我成功了。但是，当我想输入名称之间有空格的名称时，我无法将空格作为值传递。当我这样做时，它不起作用。

例如:我输入“John”...列出了所有类似 John 的名字。但是当我输入“John Smith”时，由于单词之间有空格，所以没有列出任何内容。

所以问题很明显了。我怎样才能让空间也通过。这样就会显示“John Smith”结果。我想我可能必须将其作为 %20 传递。但我尝试过的如下。但它不起作用。我使用脚本中的“getcont()”函数传递输入值。这就是我被困住的地方。我确信这是一个简单的 jquery 解决方案。但我是 Jquery 的业余爱好者。请指教。

<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);
}