CODEWITHSUNDEEP
jquery-uijqueryjquery-selectorsautocomplete
superartsy
superartsy

Reputation: 489

Multiple Autocomplete box using same Ajax

I want to have two different Autocomplete boxes but both using the same AJAX method in the background. Here is my script

$(document).ready(function () {
    $("#SearchProject")
        .each(function () {
            var urlloc = "/Project/FindProjects";
            $(this).autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: urlloc, type: "POST", dataType: "json",
                        data: { searchString: request.term, maxResults: 10 },
                        success: function (data) {
                            response($.map(data, function (item) {
                                return { label: item.name, value: item.name, id: item.id }
                            }))
                        }
                    })
                },
                select: function (event, ui) {
                    $("[id$='ProjectID']").val(ui.item.id);
//                    alert(ui.item ? ("You picked '" + ui.item.label + "' with an ID of " + ui.item.id)
//                    : "Nothing selected, input was " + this.value);

                }
            });
        });
    });

I want my input fields on the form as below. 

 <input id="SearchProject" name="SearchProject" type="text" value="" /><input  type="hidden" name="ProjectID" id="ProjectID" value="" />

    <input id="SearchProject2" name="SearchProject" type="text" value="" /><input type="hidden" name="ProjectID" id="ProjectID2" value="" />

When autocomplete select is complete I want the corresponding hidden field to be updated. How do i achieve this?

Upvotes: 1

Views: 376

Answers (1)

parsifal
parsifal

Reputation: 348

Two possibilities:

First (the one I prefer): extract your auto-complete setup into a method:

function configureAutocomplete(autoField, updatedField)

You call this method for as many auto-complete fields as you want, passing it two JQuery selectors: the selector for the auto-complete field, and the hidden update field.

The other way is to base the ID of the hidden field on that of the auto-complete field. This will let you use an each to attach behavior to the fields, but I think it' more trouble than it's worth.

Upvotes: 1

Related Questions