jQuery live search for many input (array) fields

Question

I try to do a jQuery live search for many input fields.
With only 1 input field (without array) it's working all great,
but with many search fields with array there is just happening nothing.
(The livesearch.php file is for now only saying "echo 'test';")

I hope you can help me.

Thanks for answer.
But it still doesn't work.
I just don't understand why the ajax-part doesn't work.
I edited my code to the following:

    <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>

score 0 · Answer 1 · edited May 23 '17 at 11:52

i recommend this post for using inputs with same names. you cannot use IDs twice. they should be unique!

try folloing:

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

and use simple selectors for simple reading js:

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

ul seems always after .search so you could use in scope of current .search

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

score 0 · Accepted Answer · answered Nov 29 '15 at 11:55

the reason of your problem is simple, this happens because , this pointer this is not showing to the same element as in the beginning.

At first the this, points to the input element, that is why it works correct, but inside the $.ajax request , it means the **function success itself.**

in order to work correct assign this to a new variable and use that variable inside the success function.

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

see my fixes:

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

            };
          });

        });

this should make the trick, hope helps good luck.

omg :D thanks for the solution and the great explanation! it works great! — oMeGa2k3, Nov 29 '15 at 12:41

jQuery live search for many input (array) fields

2 Answers2