Ajax Автозаполнение для jQuery - как установить путь поиска, используя атрибут данных - PullRequest
0 голосов
/ 20 января 2020

Я использую https://github.com/devbridge/jQuery-Autocomplete для достижения функциональности автозаполнения, но изо всех сил пытаюсь установить источник данных динамически с помощью приведенного ниже кода. Источник данных находится в data-атрибуте текстового поля. Функция sendDataSource возвращает источник данных, но не при вызове в lookup. Есть ли способ добиться этого? Я просто хотел избежать использования нескольких идентификаторов / классов каждый раз, когда автозаполнение используется по всему сайту, следовательно, общее имя класса c, данное текстовому полю.

JS Корзина

Любая помощь очень ценится!

var statesList = [{
      value: 'California'
    },
    {
      value: 'Texas'
    },
    {
      value: 'New York'
    },
    {
      value: 'Florida'
    },
    {
      value: 'Illinois'
    },
    {
      value: 'Pennsylvania'
    }
  ];

  var statesCodeList = [{
      value: 'AL'
    },
    {
      value: 'AK'
    },
    {
      value: 'AZ'
    },
    {
      value: 'CA'
    }
  ];


  $('.autocomplete').autocomplete({
    lookup: sendDataSource($(this)),
    onSearchStart: function() {
      //console.log($(this).attr('data-states-list'));
    }

  });

  function sendDataSource(el) {
    return el.attr('data-states-list');
  }
.autocomplete-suggestions {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid #999;
  background: #FFF;
  cursor: default;
  overflow: auto;
  -webkit-box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64);
  -moz-box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64);
  box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64);
}

.autocomplete-suggestion {
  padding: 2px 5px;
  white-space: nowrap;
  overflow: hidden;
}

.autocomplete-no-suggestion {
  padding: 2px 5px;
}

.autocomplete-selected {
  background: #F0F0F0;
}

.autocomplete-suggestions strong {
  font-weight: bold;
  color: #000;
}

.autocomplete-group {
  padding: 2px 5px;
  font-weight: bold;
  font-size: 16px;
  color: #000;
  display: block;
  border-bottom: 1px solid #000;
}
<input type="text" class="autocomplete" data-states-list="statesList">


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.devbridge-autocomplete/1.4.10/jquery.autocomplete.min.js"></script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...