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.

Phiter · Accepted Answer · 2018-03-12 19:15:28Z

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

answered Mar 12, 2018 at 19:15

Phiter

15k14 gold badges52 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

GeoffM Over a year ago

Aha. Many thanks for that. My knowledge has improved!

Twisty · Accepted Answer · 2018-03-12 22:34:53Z

1

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.

edited Mar 12, 2018 at 22:34

answered Mar 12, 2018 at 21:59

Twisty

31k2 gold badges30 silver badges50 bronze badges

1 Comment

GeoffM Over a year ago

Thanks, works too, but the other poster was first. Much appreciated though!

Collectives™ on Stack Overflow

jQuery UI same autocomplete for several input elements?

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related