Question

Using the Pluralsight demos found in asp.net I created autocomplete textbox. I want to put information in the textbox and view the autocomplete suggestions in a table below the textbox without pressing a button.

I am writing my code in MVC3 and using MSSQL 2008 database.

I suspect that I need to somehow merge this functions, but I don’t know how

$(document).ready(function () {
$(":input[data-autocomplete]").each(function () {
    $(this).autocomplete({ source: $(this).attr("data-autocomplete") });
});

$("searchForm").each(function() {
    $.getJSON($(this).attr("action"),
        $(this).serialize(),
        function(data) {
            var result = $("#searchTemplate").tmpl(data);
            $("searchResults").empty()
                .append(result);
        }
    );
    return false;
}); })

Any help will be very appreciated.

Answer 1

Your question is very unclear. Can’t see any relation between the first and the second script. Not to mention that the second one seems wrong as there’s no <searchForm> valid DOM element which is what you seem to be looping through.

It looks like you are trying to automatically perform a search by submitting the form containing the autocomplete textbox when a selection is made. For this you could use the select event:

$(":input[data-autocomplete]").each(function () {
    $(this).autocomplete({ 
        source: $(this).attr("data-autocomplete"),
        select: function(event, ui) {
            // a selection was made, here you could trigger the submission of the form
            // as if a submit button was pressed
            $(this).closest('form').trigger('submit');
        }
    });
});

Of course if you wanted this form to perform an AJAX submit instead of a regular postback you could use an Ajax.BeginForm instead of a regular Html.BeginForm.