CODEWITHSUNDEEP
jquery
James
James

Reputation: 6499

jQuery Early Binding a Function Possible?

I'm having a small issue with a bit of jQuery:

function getQuickResults(terms) 
{ 
   var url = '/Search/PreviewSearch';

    $.ajax({
        type: "POST",
        url: url,
        data: { terms: terms },
        dataType: "json",
        error: function(xhr, status, error) {
            alert(error);
        },
        success: function(json) {

            $("#quickSearchResults").empty();

            for (var i = 0; i < json.length; i++) {
                var title = json[i].Title;

                $("#quickSearchResults").append($("<span class='quickSearchResult' />"))
                                        .children(":last")
                                        .append(json[i].Title)
                                        .append("<br />");
            }

            $("#quickSearchResults").children(":last").css({ 'border-bottom': 'none' });

            if (json.length > 0) {
                $("#quickSearchResults").show();
            }
            else {
                $("#quickSearchResults").hide();
            }
        }
    });
}

Basically this is my ajax function for a input hint system. On key up, it sends an ajax request to search and returns a small drop down of values.

What I'd like to do, is when a user clicks on one of the spans in the results, it copies that span to the textbox. So I tried this:

        $("#quickSearchResults").append($("<span class='quickSearchResult' />"))
                                .children(":last")
                                .append(json[i].Title)
                                .append("<br />")
                                .click(function(evt) {
                                    $("#searchBox").val(json[i].Title);    
                                });

But this does not work. I tried assigning a variable to json[i].Title and using that instead, but it seems to just always return the title of the last result. I'm thinking it's probably a binding issue, but don't know if there's a way around it.

Upvotes: 0

Views: 156

Answers (3)

Bill Brooks
Bill Brooks

Reputation: 751

I'm not a jQuery guru by any means, but would something like this work?

function setSearchBox()
{
    $("#searchBox").val($(this).data("title"))
}

and then in your AJAX response...

$("#quickSearchResults").append($("<span class='quickSearchResult' />"))
                        .children(":last")
                        .append(json[i].Title)
                        .append("<br />")
                        .data("title",json[i].Title)
                        .click(setSearchBox);

Upvotes: 1

Josh Mein
Josh Mein

Reputation: 28625

Why reinvent the wheel? Jquery Autocomplete seems like it would fit your purpose

If not it will definitely give you insight as of how to do what you are trying to do

Upvotes: 2

meder omuraliev
meder omuraliev

Reputation: 186562

for (var i = 0; i < json.length; i++) {
    (function(i){
    var title = json[i].Title;

    $("#quickSearchResults").append($("<span class='quickSearchResult' />"))
                            .children(":last")
                            .append(json[i].Title)
                            .append("<br />");
    })(i);
}

You would need to invoke a function so the i is stored and bound to a function instead of relying on the last value, I think something like this should work to create the closure. Let me know if it doesn't.

Upvotes: 2

Related Questions