Я использую 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>