jQuery Early Binding a Function Possible?

Question

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.

Answer 1

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.

Answer 2

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

Answer 3

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