jQuery 实时搜索多个输入（数组）字段

Question

我尝试对许多输入字段进行 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>

Answer 1

我推荐此 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

Answer 2

你的问题的原因很简单，发生这种情况是因为这个指针 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
                }
              });

            };
          });

        });

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

jQuery 实时搜索多个输入（数组）字段

jQuery live search for many input (array) fields

arrays

jquery

livesearch