【问题标题】:issue passing space with jquery On KeyUp function使用 jquery On KeyUp 函数传递空间问题
【发布时间】:2016-08-30 09:31:54
【问题描述】:

我有以下代码。我要做的是在输入框中输入姓名时从我的数据库中创建匹配联系人的下拉列表。我在输入时捕获输入变量并将其传递给一个 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>

【问题讨论】:

  • if(x==" "){x=="%20";} 应该是if(x==" "){x="%20";}
  • 试过...没用..

标签: javascript php jquery parameter-passing keyup


【解决方案1】:
function getcont(){
    var x = document.getElementById("cit");
    x=encodeURI(x.value);
    $('#contdiv').fadeIn('fast').load('searchconts.php?cit='+x);
}

【讨论】:

  • 你把 x.value 改成 x 了吗?
  • 是的,我做到了。在 encodeURI 中使用“X”时,脚本会失败。当我更改为“x”并使用警报来查找 x 发生了什么时,脚本仍然失败,但我在警报中得到了这个 %5Bobject%20HTMLInputElement%5D
  • 好的!知道了 !必须这样做 var x = document.getElementById("cit").value;
  • 是 x=encodeURI(x.value);也有效!万分感谢 ! @Jekin!
【解决方案2】:
function getcont(){
    var x = document.getElementById("cit").value;
    if(x==" "){x="%20";}
    $('#contdiv').fadeIn('fast').load('searchconts.php?cit='+x);
}

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2014-08-07
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2023-03-23
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多