Getting search results to display ul for text field being inputted into

This may not help with the instant problem, but it's worth being aware of the technologies that are on hand today.

What you're asking about here has always been thorny in jQuery (a 12-year old library) and has been perfectly solved by AngularJS (a 5-year old library).  AngularJS gives you two way data bindings between the view and the model.  A change in either is reflected in the other.  So you don't have to deal with the problem of which selector goes with which input - you just bind a new input to the generated input control and bind a new output to the generated response area.  Instead of starting with HTML (which was never designed for dynamic views) and using JavaScript (jQuery) to manipulate named elements, with AngularJS you build the DOM in real time, in the client browser.  Typically server communication is with AJAX requests and JSON.  It's not easy to learn AngularJS, but it's very cool when you see it in action.
https://angularjs.org/

>> $(this).closest(".result").siblings("input").val($(this).text());
Based on the markup you supplied, try the following instead:

$('input',$(this).closest(".form-group")).val($(this).text());

Select all Open in new window

Are you are referring to line 16 of your original code? If so, try:

 $(".result", $(this).closest("form-group")) .html(data);

Select all Open in new window

>>  I tried your new code and still no search results
I missed a period on my last post.  It should be ".form-group" (notice the period to the left of "form-group").

Do you have a link to your page?

AngularJS is a framework
jQuery is a library

Important to understand the difference between the two. jQuery is fine for this setup.

Next lets look at some issues with your code

//$(document).ready(function() {
// I prefer $(function 
$(function() {
    $("input").keyup(function() {
        var input = $(this).val();
        $(".loader").show();
        if (input.length > 3) {
            $.ajax({
                type: 'POST',
                url: 'insert-ajax.php',
                data: {
                    name: input
                },
                success: function(data) {
// PROBLEM: THE if SAYS YOU ARE EXPECTING AN OBJECT BACK - SOMETHING LIKE
// {
//     error: 'Something here'
// }
// BUT ...
                    if (!data.error) {
//                        	$(".result").html(data);
// OVER HERE YOU ARE USING IT AS AN HTML RETURN
// ALSO .result IS GOING TO RETURN THE FIRST .result IT FINDS
// ON THE PAGE - NOT RELATIVE TO THE INPUT
                        $(".result").closest("ul").html(data);
                        $(".loader").hide();
                    }
                }

            });
        }

        if (input.length < 1) {
            $(".loader").hide();
            $(".result").html("");
        }
    });

    $(".result").on("click", "li", function() {
        console.log($(this).text());
        $(this).closest(".result").siblings("input").val($(this).text());
    });

});

Select all Open in new window

Now lets look at a solution that works

<script>
$(function() {
  $("input").keyup(function() {
    // GET A REFERENCE TO THE <input> THAT TRIGGERED THE EVENT
    var jqo = $(this);
	
	// GET THE VALUE
    var input = jqo.val();
	
	// FIND THE result <div> FOR THIS <input>
    var result = jqo.closest('div').find('.result');

    if (input.length > 3) {
      // GET DATA FROM SERVER
      $.ajax({
        type: 'POST',
        url: 't2185.php',
        data: {
          name: input
        }
      })
      // .success IS ON ITS WAY OUT
      // I PREFER promise INTERFACE
      .done(function(data) {
        // data IS PLAIN HTML SO ADD IT TO OUR
        // result WINDOW
        result.html(data);
      })
    }
	// THE REST IS THE SAME
    if (input.length < 1) {
      result.html("");
    }
  });

  $(".result").on("click", "li", function() {
    console.log($(this).text());
    $(this).closest(".result").siblings("input").val($(this).text());
  });
});
</script>

Select all Open in new window

Working sample here

Once you get that working we can look at adding the loader

Also note - your <input>'s have the same name attributes - you might need to change these of you need to use them on the server - in my code I have used arrays to get around the dynamic creation issue

So, "name" would have to be "name[]"

Firstly, name <> name[] - the former will only come through in PHP $_POST as the last value submitted.
Consider this example

<form action="reflect.php" method="post">
<input name="name" value="fred" />
<input name="name" value="frank" />
<input name="name" value="frida" />
<input type="submit" />
</form>

Select all Open in new window

Result

$_POST
Array
(
    [name] => frida
)

Select all Open in new window

However if we do the follwoing

echo file_get_contents('php://input');

Select all Open in new window

We get this

name=fred&name=frank&name=frida

Select all Open in new window

PHP takes the last value for the $_POST['name']

name[] on the other hand

<form action="reflect.php" method="post">
<input name="name[]" value="fred" />
<input name="name[]" value="frank" />
<input name="name[]" value="frida" />
<input type="submit" />
</form>

Select all Open in new window

Gives us

$_POST
Array
(
    [name] => Array
        (
            [0] => fred
            [1] => frank
            [2] => frida
        )
)

Select all Open in new window

Secondly, if you look at the sample I posted you will see I used name[]

$(this).closest(".result").hide()

Select all Open in new window

I would rather do this

<script>
$(function() {
  $("input").keyup(function() {
    // GET A REFERENCE TO THE <input> THAT TRIGGERED THE EVENT
    var jqo = $(this);
	
	// GET THE VALUE
    var input = jqo.val();
	
	// FIND THE result <div> FOR THIS <input>
    var result = jqo.closest('div').find('.result');
    if (input.length > 3) {
      // GET DATA FROM SERVER
      $.ajax({
        type: 'POST',
        url: 't2185.php',
        data: {
          name: input
        }
      })
      // .success IS ON ITS WAY OUT
	  // I PREFER promise INTERFACE
	  .done(function(data) {
	    // data IS PLAIN HTML SO ADD IT TO OUR
		// result WINDOW
        result.html(data);
        result.data('input', jqo);
      })
    }
	// THE REST IS THE SAME
    if (input.length < 1) {
      result.html("");
    }
  });
  $('.result').on('click','li', function() {
	var res = $(this).closest('.result');
	res.data('input').val(this.textContent);
	res.html('');
  });
});
</script>

Select all Open in new window

Breaking it down
First up this line

result.data('input', jqo);

Select all Open in new window

This is taking advantage of jQuery objects. I assign the input control for the .result container to a data attribute on the element. The jQuery data() method allows you to assign a scalar value (string, number) or an object. The jqo is the jQuery object we created at the beginning so we could access the input val.
Now in our event handler

  $('.result').on('click','li', function() {
	var res = $(this).closest('.result');
	res.data('input').val(this.textContent);
	res.html('');
  });

Select all Open in new window

The input is available on the result container - so we save ourselves an extra find.
We can even take this one step further

  $('.result').on('click', function(evt) {
 	$(this).data('input').val(evt.target.textContent);
	this.textContent = '';
  });

Select all Open in new window

Here we bind to the .result container - not the li. We know the children will be li's so we can use this code.
We use the event.target to get the content we want to send to the input - but because the event is firing on the .result container we don't have to use a .closest() to find the container to get the input data attribute and clear the contents.

I have updated the sample online with the above (using the last method)

Sorry, maybe I didn't explain what I was trying to say properly but I was agreeing with you.

No, I did understand - I just provided that post for background because there is often a misconception that when using a non array duplicate data is lost. It is only lost when accessing the $_POST array but you can still get the data using php://input - and then parse it yourself.

In case you missed it check the post before my last one for the solution on how to clear the <ul>

Up to you - the loader depends on whether you want one per input or a global loader. The latter is dead easy you just hide and show it. The former is also easy but have to reference it relative to its container.

What does the loader look like - can you post it.

did you make .form-group position: relative?

Explain to me again exactly how you want the loader to look
Do you have a screen shot?
Are you using an image / spinner (.gif) as part of the loader?
I can help you but I need to know what I am aiming at.

Got it ... working on it.

Here is a first attempt
CSS

<style type="text/css">
.form-group {
	position: relative;
	width: 25%;
}
input {
	width: 100%;
	height: 30px;
}
.loader {
	display: none;
	position: absolute;
	right: 0;
	top: 0;
	height: 100%;
	background: rgba(0,0,0,0.15) url(images/loading2.gif) no-repeat right center;
	width: 100%;
}
</style>

Select all Open in new window

HTML

<div class="form-group">
  <input type="text" name="name[]" autocomplete="off">
  <div class="loader"></div>
  <div class="result"></div>
</div>
<div class="form-group">
  <input type="text" name="name[]" autocomplete="off">
  <ul class="result"></ul>
</div>

Select all Open in new window

jQuery

<script>
$(function() {
  $("input").keyup(function() {
    // GET A REFERENCE TO THE <input> THAT TRIGGERED THE EVENT
    var jqo = $(this);
  
    // GET THE VALUE
    var input = jqo.val();
  
    // FIND THE result <div> FOR THIS <input>
	var parent = jqo.closest('div');
    var result = parent.find('.result');
    if (input.length > 3) {
		var loader = parent.find('.loader').show();
      // GET DATA FROM SERVER
      $.ajax({
        type: 'POST',
        url: 't2185.php',
        data: {
          name: input
        }
      })
      // .success IS ON ITS WAY OUT
      // I PREFER promise INTERFACE
      .done(function(data) {
        // data IS PLAIN HTML SO ADD IT TO OUR
        // result WINDOW
        result.html(data);
        result.data('input', jqo);
		loader.hide();
      })
    }
    // THE REST IS THE SAME
    if (input.length < 1) {
      result.html("");
    }
  });
  
  $('.result').on('click', function(evt) {
    $(this).data('input').val(evt.target.textContent);
    this.textContent = '';
  });
});
</script>

Select all Open in new window

Updated sample here

The jQuery changes are arbitrary - the main changes are the styling to the HTML to position the loader. You can play around with the styling. There are different options depending on the look you want to achieve.

I have added a sleep to the PHP script to simulate a server delay so you can see the spinner.

That was a mistake - the HTML should be

<div class="form-group">
  <input type="text" name="name[]" autocomplete="off">
  <ul class="result"></ul>
</div>
<div class="form-group">
  <input type="text" name="name[]" autocomplete="off">
  <ul class="result"></ul>
</div>

Select all Open in new window

Note the latest sample does not have a .loader DIV because we are styling the <input> directly.

If you look at the sample link I posted above and go to the HTML tab of the source window you will see the HTML for the blocks is identical

jqo refers to the <input> so when you say

jqo.removeClass('loader')

Select all Open in new window

- it removes the class that adds the spinner to the <input>
when you say

jqo.removeClass('loader').hide()

Select all Open in new window

you are saying hide the <input>.
Remember the new solution uses CSS to style the <input> with the loader overlay - there is no element that represents the loader so there is nothing to hide - all we are doing is adding / removing a class that adds / removes styling to the <input>

The disabled bit I added on to prevent users from typing in the box while a lookup was being done.

.success() is being deprecated in favour of the promise return
Refer to this link http://api.jquery.com/jQuery.ajax/#jqXHR

Deprecation Notice: The jqXHR.success(), jqXHR.error(), and jqXHR.complete() callbacks are removed as of jQuery 3.0. You can use jqXHR.done(), jqXHR.fail(), and jqXHR.always() instead.

To summarise:

The solution above uses CSS to style the <input> to give the appearance of having a loader overlaid on top of it when in reality all we are doing is adding a class that has a background-image positioned right.

You are welcome.