jQuery实时搜索许多输入(数组)字段

我尝试对许多输入字段进行jQuery实时搜索
只有一个输入字段（没有数组），一切都很好，
但是，对于许多带有数组的搜索字段，什么都没有发生
（livesearch.php文件目前只显示"echo'test'；"）

我希望你能帮助我。

谢谢你的回答
但它仍然不起作用
我只是不明白为什么ajax部分不起作用
我将代码编辑为以下内容：

    <html><head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
  <body>
      <div id="main">
        First search field:<br>
        <input type="text" name="search[]" class="search" autocomplete="off">
        <div></div>
        Second search field:<br>
        <input type="text" name="search[]" class="search" autocomplete="off">
        <div></div>
      </div>
      <script>

        $(document).ready(function() {  
          $('.search').on("keyup", function(e) {
            var search_string = $(this).val();
            // Do Search
            if (search_string == '') {
              $(this).next().fadeOut();
            }else{
              $(this).next().fadeIn();
              //$(this).next().html("hallo"); //THIS WORKS!!!

              $.ajax({
                type: "POST",
                url: "./livesearch.php",
                data: { query: search_string },
                cache: false,
                success: function(data){
                  $(this).next().html(data); //THIS DOESN'T WORK!!!
                }
              });
            };
          });
        });
      </script>
  </body>
</html>

问题的原因很简单，这是因为，这个指针this没有显示到与开头相同的元素。

首先，this指向输入元素，这就是它正确工作的原因，但在$.ajax请求中，它意味着**函数成功本身。**

为了正确工作，请将this分配给一个新变量，并在成功函数中使用该变量。

var myInputElmnt = $(this);//assign this to temp variable
.....
$(myInputElmnt).next().html(data); //it works because it shows to your input element

查看我的修复：

$(document).ready(function() {  
          $('.search').on("keyup", function(e) {
            var search_string = $(this).val();
            var myInputElmnt = $(this);//assign this to temp variable
            // Do Search
            if (search_string == '') {
              $(this).next().fadeOut();
            }else{
              $(this).next().fadeIn();
              $(myInputElmnt).next().html("hallo"); //THIS WORKS ALSO

              $.ajax({
                type: "POST",
                url: "./livesearch.php",
                data: { query: search_string },
                cache: false,
                success: function(data){
                  $(myInputElmnt).next().html(data); //it works because it shows to your input element
                }
              });
            };
          });
        });

这应该是一个技巧，希望有助于好运。

我推荐这篇文章使用相同名称的输入。您不能使用ID两次。它们应该是独一无二的！

尝试跟踪：

<input type="text" name="search[]" class="search" id="search1" autocomplete="off">
<input type="text" name="search[]" class="search" id="search2" autocomplete="off">

并使用简单的选择器进行简单的读取js:

$('.search').on('keyup', ...

ul似乎总是在之后。搜索，所以您可以在当前范围内使用。搜索

$(this).next() // jQuery object of ul

相关内容

最新更新

热门标签：