jQuery UI такое же автозаполнение для нескольких элементов ввода?

Question

Страница имеет несколько полей input, размещенных в сетке. Первый столбец - это текстовое поле, в котором я хотел бы найти имя местоположения с помощью функции автозаполнения jQueryUI. Он отлично работает с одним элементом; использование getElementsByName (или тега, или класса) возвращает правильное количество элементов. Однако автозаполнение не работает. Я прочитал Как связать автозаполнение jQuery UI с несколькими входами элементов?, но не понимаю, как применить это к моему коду.

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>

Я предполагаю, что виновата именно эта линия. На другой странице с одним элементом все работает нормально:

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

Но это, похоже, не работает (массив элементов):

allElements[i].autocomplete({
[etc]

И снова обратите внимание, что allElements действительно содержит ожидаемое количество записей. В отладчике браузера нет ошибок времени выполнения, и цикл for () выполняется ожидаемое количество раз.

javascript html jquery-ui

1

GeoffM 12 Мар 2018 в 22:10

Answer 1

autocomplete - это расширение jQuery, поэтому вы не можете использовать его непосредственно в элементе HTML.

Вместо этого сделайте это:

$(allElements[i]).autocomplete({

Или даже лучше:

 $('[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
    });
});

1

Phiter 12 Мар 2018 в 19:15

Answer 2

Несколько способов сделать это. Я бы посоветовал использовать .each() вот так:

$(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() передает индекс и элемент HTML на основе выбранных объектов jQuery.

Я бы лично использовал селектор class. Таким образом, нет проблем с name.

Надеюсь, это поможет.

1

Twisty 12 Мар 2018 в 22:34

jQuery UI такое же автозаполнение для нескольких элементов ввода?

2 ответа

Похожие вопросы

Связанные вопросы

Новые вопросы

javascript