troubleshooting Question

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

Avatar of Crazy Horse
Crazy HorseFlag for South Africa asked on
PHPAJAXjQuery
43 Comments2 Solutions449 ViewsLast Modified:
I had this question after viewing Ajax php search with multiple text fields generated by php.

So, I tried to think about what everyone has said and based on that I have tried to come up with a solution that doesn't require using ID's. At this stage I don't even want to add complexity by adding data-id values.

To recap, an unknown number of text fields will be generated by a user. Depending on their input, 1 could be echoed out, 3 could be echoed out etc. All of which will be identical and look pretty much like this: (I have put 2 together for this example)

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

When results are displayed and a user clicks on a li, that text displays in the text field closest or associated to that text field which is exactly what I want.

The problem I am having though is getting the ul to only display in the text field the person is typing in. What is happening now is that if I type in text field 1, the ul shows for both text fields which is wrong. I am struggling to get this line right.

$(".result").closest("ul").html(data);

Here is the full jQuery: ( I commented out the line that did work to display records, but for both text fields instead of just the one)

$(document).ready(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) {

                    if (!data.error) {
//                        	$(".result").html(data);
                        $(".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());
    });

});
SOLUTION
Join our community to see this answer!
Unlock 2 Answers and 43 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 2 Answers and 43 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros