CODEWITHSUNDEEP
phpjqueryajax
Shanky
Shanky

Reputation: 85

Custom Autocomplete With Ajax/jQuery

I'm creating custom autocomplete with help of Ajax, jQuery and I have hard-coded one database which is created in PHP as I am getting correct output. But when I click on any text in the autocomplete box it does not get selected.

$(document).ready(function () {

    $("#search_Textbox").keyup(function () {
        var searchbox_Value = $("#search_Textbox").val();
        $("#serach_Result").show();
        if ($("#search_Textbox").val() == null || ($("#search_Textbox").val() == "")) {
            $("#serach_Result").hide();
        }

        $.ajax({
            url: "custom_database.php",
            type: "GET",
            data: {
                text_Value: searchbox_Value
            },
            success: function (server_Response) {
                $("#serach_Result").html(server_Response);
            }
        });
    });

    $('a').bind('click', function () {
        alert("yes");
        var achor_tag_text = $(this).val();
        alert(achor_tag_text);

        $("#search_Textbox").text(achor_tag_text);
    });
});

Upvotes: 1

Views: 435

Answers (2)

Anwar Hussain
Anwar Hussain

Reputation: 495

You could use .on() function it is more preferable from jquery 1.7

$(document).on('click','a', function() {
       alert("yes");
       //do your stuff
       var achor_tag_text = $(this).val();
       alert(achor_tag_text);
       $("#search_Textbox").text(achor_tag_text);
});

but don't bind common element to click event give an class name to an element then bind your event with that class

Upvotes: 1

Dezza
Dezza

Reputation: 1094

You are binding to the <a> tags which are present at the initial load of the page, not those that are present when the ajax returns.

Change your $('a').bind('click', function() { to $(document).on('click', 'a', function() {.

Upvotes: 1

Related Questions