jQuery UI same autocomplete for several input elements?

Question

Page has a number of input fields laid out in a grid. The first column is a text field where I would like to lookup a location name using jQueryUI's autocomplete function. It works fine on a single element; using getElementsByName (or tag, or class) returns the correct number of elements. However, autocomplete is not working. I have read How to link jQuery UI autocomplete to several input elements? but do not understand how to apply it to my code.

CSHTML:

@for (int i = 0; i < Model.Count; i++)
{
    <tr>
        <td><input type="text" name="LocationStr" value="@Model[i].LocationStr" class="form-control" /></td>
[etc]

<script type="text/javascript">
    $(document).ready(
        function () {
            var allElements = document.getElementsByName("LocationStr");
            for (i = 0; i < allElements.length; i++) {
                allElements[i].autocomplete({
                    source: function (request, response) {
                        $.ajax({
                            url: "/Wtt/AutoCompleteLocation",
                            dataType: "json",
                            data: {
                                term: request.term,
                                locationSetId: $("#LocationSetId").val()
                            },
                            success: function (data) {
                                response(data);
                            }
                        });
                    },
                    min_length: 3,
                    delay: 300
                });
            }
        });
</script>

I'm assuming it's this line that is the culprit. On another page with a single element it works fine:

$('#LocationStr').autocomplete({
[etc]

But this does not seem to work (array of elements):

allElements[i].autocomplete({
[etc]

Again, note that allElements does contain the expected number of entries. There are no runtime errors in the browser debugger, and the for() loop is executed for the expected number of times.

Answer 1

autocomplete is a jQuery extension so you can't use it directly in a HTML element.

Do this instead:

$(allElements[i]).autocomplete({

Or even better:

 $('[name=LocationStr]').each(function(){
    $(this).autocomplete({
        source: function (request, response) {
            $.ajax({
                url: "/Wtt/AutoCompleteLocation",
                dataType: "json",
                data: {
                    term: request.term,
                    locationSetId: $("#LocationSetId").val()
                },
                success: function (data) {
                    response(data);
                }
            });
        },
        min_length: 3,
        delay: 300
    });
});

Answer 2

Few ways to do this. I would suggest using the .each() like so:

$(function(){
  var allElements = $("[name='LocationStr']");
  allElements.each(function(ind, elem){
    $(elem).autocomplete({
      source: function (request, response) {
        $.ajax({
          url: "/Wtt/AutoCompleteLocation",
          dataType: "json",
          data: {
            term: request.term,
            locationSetId: $(elem).val()
          },
          success: function (data) {
            response(data);
          }
        });
      },
      min_length: 3,
      delay: 300
    });
  });
});

.each() passes an Index and HTML Element based on the selected jQuery objects.

I would personally use a class selector. This way there is no name issues.

Hope that helps.