jQuery 实时搜索许多输入（数组）字段答案

【问题标题】：jQuery live search for many input (array) fieldsjQuery 实时搜索许多输入（数组）字段
【发布时间】：2015-11-26 23:59:46
【问题描述】：

我尝试对许多输入字段进行 jQuery 实时搜索。
只有 1 个输入字段（没有数组）它工作得很好，
但是对于许多带有数组的搜索字段，什么都没有发生。
（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>

【问题讨论】：

标签： jquery arrays livesearch

【解决方案1】：

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

一开始this，指向输入元素，这就是它正常工作的原因，但是在$.ajax请求里面，它意味着**函数成功本身。**

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

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

            };
          });

        });

这应该可以解决问题，希望有助于祝你好运。

【讨论】：

omg :D 感谢您的解决方案和出色的解释！效果很好！

【解决方案2】：

我推荐这个post 使用同名的输入。您不能使用 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 似乎总是在 .search 之后，因此您可以在当前 .search 范围内使用

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

【讨论】：