Fatal编程技术网
  • jquery/
  • Jquery 搜索函数特殊字符错误

Jquery 搜索函数特殊字符错误

jquery

Jquery 搜索函数特殊字符错误,jquery,Jquery,我的函数工作正常，直到您输入一个特殊字符，如（，+，-，}，。。。 然后我的页面开始延迟，项目显示为“闪烁”（它们出现=>消失=>出现=>…）。我可以做什么来禁止输入任何特殊字符值 function showList(id) { var level = $('#charLevel').val(); var name = $('#gearName').val(); var timer; $.ajax({ url: 'list.php',

我的函数工作正常，直到您输入一个特殊字符，如（，+，-，}，。。。 然后我的页面开始延迟，项目显示为“闪烁”（它们出现=>消失=>出现=>…）。我可以做什么来禁止输入任何特殊字符值

function showList(id) {

    var level = $('#charLevel').val();
    var name = $('#gearName').val();
    var timer;

    $.ajax({
        url: 'list.php',
        type: 'get',
        data: { 'slot': id, 'level': level, 'name': name },
        success: function(data) {
            $('#list').html(data);

            $('#gearName').keyup(function() {
                clearTimeout(timer);
                var ms = 300;
                timer = setTimeout(function() {
                    showList(id);
                }, ms);
            });
        }
    });
}
编辑：

以下是模态内容代码：

<input id="gearName" type="text" placeholder="Search..."/>
<table class="tableau">
    <tr>
        <td width="10%" class="top">L</td>
        <td width="90%" class="top">Name</td>
    </tr>
</table>
<div class="scroll" id="list">
</div>
我看不出有任何迹象表明问题出在
+
或类似问题上，但您确实不希望每次调用
showList
时都重新连接
keyup
。只需连接一次即可：

function showList(id) {

    var level = $('#charLevel').val();
    var name = $('#gearName').val();

    $.ajax({
        url: 'list.php',
        type: 'get',
        data: { 'slot': id, 'level': level, 'name': name },
        success: function(data) {
            $('#list').html(data);
        }
    });
}
function hookUpId(id) {
    var timer = 0;

    $('#gearName').keyup(function() {
        clearTimeout(timer);
        timer = setTimeout(function() {
            showList(id);
        }, 300);
    });
}
…然后调用
hookUpId（relevantValueHere）；

在下面的评论中，您说过，
gearName
被代码所取代。但根据您问题中的HTML，它不是：

<input id="gearName" type="text" placeholder="Search..."/>
<!--   ^---------------------------------------------------- Here's '#gearName' -->
<table class="tableau">
    <tr>
        <td width="10%" class="top">L</td>
        <td width="90%" class="top">Name</td>
    </tr>
</table>
<div class="scroll" id="list">
<!--                ^--------------------------------------- Here's '#list' -->
</div>
尝试像这样对字符串进行编码，
encodeURIComponent（level）
。@user26409021:无需，当您为
数据提供对象时，jQuery会这样做。不要在回调中附加事件处理程序。一个事件将有多个处理程序。@undefined是正确的，它会变得更慢和“滞后”因为附加了越来越多的处理程序，所以函数一直在调用自己，直到它几乎成为一个无休止的循环。从服务器返回的
数据是什么样的？它是包含用户输入的
级别的
还是
名称的
呢？事实上，#gearName被这个ajax请求更改了。因此，如果我把它放在别处，它就不起作用了另外，当你点击一个特定的div时，这个id是由另一个函数给出的。所以我真的不知道如何获取这个id。@loumi:被更改还是被替换？如果它刚刚被更改，你就不必再连接它了。如果它被替换，是的，这意味着你必须重新连接它。看到你的HTML会有很大帮助。它被替换了。我将编辑我的问题一分钟内，与此函数相关的html和php。@loumi：在您提出问题的html中，
gearName
不在
list
内，
list
是您要更新的唯一元素。因此，
gearName
没有被替换。如上所述。这是真的。但是，当我将其从此函数中删除时，它没有工作我在函数中只放了一个警报对话框，当我输入值时什么也没有发生。这应该是因为模态内容代码是由modalContent（id）加载的。

function showList(id) {

    var level = $('#charLevel').val();
    var name = $('#gearName').val();

    $.ajax({
        url: 'list.php',
        type: 'get',
        data: { 'slot': id, 'level': level, 'name': name },
        success: function(data) {
            $('#list').html(data);
        }
    });
}
function hookUpId(id) {
    var timer = 0;

    $('#gearName').keyup(function() {
        clearTimeout(timer);
        timer = setTimeout(function() {
            showList(id);
        }, 300);
    });
}



<input id="gearName" type="text" placeholder="Search..."/>
<!--   ^---------------------------------------------------- Here's '#gearName' -->
<table class="tableau">
    <tr>
        <td width="10%" class="top">L</td>
        <td width="90%" class="top">Name</td>
    </tr>
</table>
<div class="scroll" id="list">
<!--                ^--------------------------------------- Here's '#list' -->
</div>



<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  <meta charset="utf-8">
  <title>Example</title>
</head>
<body>
<input id="gearName" type="text" placeholder="Search..."/>
<table class="tableau">
    <tr>
        <td width="10%" class="top">L</td>
        <td width="90%" class="top">Name</td>
    </tr>
</table>
<div class="scroll" id="list">
</div>
<script>
  (function() {
    "use strict";
    function showList(id) {

      var level = $('#charLevel').val();
      var name = $('#gearName').val();

      // Simulate ajax with setTimeout
      setTimeout(function() {
        $("#list").html(
          '<table>' +
          '<tr onclick="itemInfo(\'stuff here\')">' + // Note that I didn't bother to include itemInfo, so clicking won't actually do anything
          '<td width="10%">random level: ' + Math.floor(Math.random() * 100) + '</td>' +
          '<td width="90%">some name</td>' +
          '</tr>' +
          '</table>'
        );
      }, 50);
      /*
      $.ajax({
        url: 'list.php',
        type: 'get',
        data: { 'slot': id, 'level': level, 'name': name },
        success: function(data) {
          $('#list').html(data);
        }
      });
      */
    }
    function hookUpId(id) {
      var timer = 0;

      $('#gearName').keyup(function() {
        clearTimeout(timer);
        timer = setTimeout(function() {
          showList(id);
        }, 300);
      });
    }    

    hookUpId('an-id');
  })();
</script>
</body>
</html>