У меня есть сайт, на котором я пытаюсь включить автозаполнение input
, используя динамический datalist
. Все работает нормально, за исключением того, что список не всегда раскрывается, но инспектор показывает, что datalist
заполнен должным образом.
Когда вы вводите запись в input
(текстовое поле), после 3 символов должно появиться раскрывающееся меню, но редко. Вы можете открыть Inspector и увидеть, что datalist
заполнен, но он просто не отображается. По мере того, как вы вводите больше символов, он может появляться или не появляться. Тем не менее, нажатие Backspace чаще всего заставляет его появляться. Я попытался извлечь код typingTimer, а также минимальный код из 2 символов. Я даже изменил его на вызов AJAX, чтобы попытаться добавить параметр async, но безуспешно. Я в тупике.
HTML
<td>
<input id = "txtTerritorySub" list = "dlTerritorySub" name = "TerritorySub" style = "width:300px;"placeholder = "City/Parrish" />
<datalist id = "dlTerritorySub" style = "width:auto;">
</datalist>
</td>
JQuery
$(document).ready(function () {
$('#txtTerritorySub').bind("input", (function () {
var typingTimer;
var element = $(this);
var srchStr = element.val();
clearTimeout(typingTimer);
if (srchStr.length > 2) {
typingTimer = setTimeout(getMatches(element, srchStr), 500);
}
}));
});
function getMatches(element, srchStr) {
$("#dlTerritorySub").empty();
$.post('Customer/getTerritorySubs', { 'srchStr': srchStr },
function (result) {
$(result).each(function (i, item) {
$("#dlTerritorySub").append($("<option>", {
value: item.territoryCode,
text: item.territorySubName + ' (' + item.territoryName + ', ' + item.countryName + ')'
}));
});
});
}
@Tetsuya - Пример строки JSON, полученной из getTerritorySubs: [{"countryCode": "US", "countryName": "Соединенные Штаты", "TerritoryCode": "AL", "TerritoryName": "Alabama," terri torySubName ": "Mobile"}, '[{"countryCode": "BR", "countryName": " Brazil", "TerritoryCo de": "CE", "TerritoryN ame": "Ceará", " TerritorySubName ":" Quixera mobim "}] То, что я имел в виду под" datalist not displaying ", на самом деле раскрывающийся список не отображается. См. изображение, которое я предоставил в моем исходном сообщении. Отображается input
, на котором я ввел" birmingha ". Автозаполнения в раскрывающемся списке ниже нет.
Можете ли вы предоставить пример строки JSON, полученной в результате действия
getTerritorySubs
и / или содержимого метода действияgetTerritorySubs
? Что вы имеете в виду, что "даталист не отображается"?