Я использую jquery ui autocomplete в форме для автозаполнения города и почтового индекса из текстового файла.
Текстовый файл отформатирован следующим образом:
FR;24108;Bergerac
FR;24109;Bergerac
FR;24110;Léguillac-de-l'Auche
FR;24110;Saint-Léon-sur-l'Isle
FR;24110;Manzac-sur-Vern
Автозаполнение работает в соответствующем поле, но я хотел бы, чтобы когда пользователь выбирал почтовый индекс, автоматически заполнял город в поле city.
А вот где не работает. Я попытался создать объект с меткой / значением:
autoCompleteData.push({cp: values[1]+'', city: values[2] + ''})
Если я сделаю console.log(), я вижу свой объект, но мне трудно использовать его, чтобы использовать его в ответ на необходимость по jquery автозаполнение пользовательского интерфейса. Я видел несколько примеров, основанных на ответе json, но я не знаю, как это адаптировать к своим потребностям. Я также пытался преобразовать свой объект в json, но не работает.
Не могли бы вы объяснить мне, как это сделать?
Вот мой рабочий код
$.ajax({
url: "path-to-file/ZipCodes.txt?id=1",
dataType: "text",
success: function (data) {
var autoCompleteData = data.split('\n');
var lines = data.split(/\r\n|\n/);
//Set up the data arrays
var autoCompleteData = Array();
for (var j = 0; j < lines.length; j++) {
var values = lines[j].split(';'); // Split up the comma seperated values
//postcodes.push(values[1], values[2]);
autoCompleteData.push(values[1] + '');
//autoCompleteData.push({cp: values[1], city: values[2] + ''});
//console.log(autoCompleteData[0][1]);
$("#edit-code-postal").autocomplete({
source: function (request, response) {
var results = $.ui.autocomplete.filter(autoCompleteData, request.term);
response(results.slice(0, 10)); // Display the first 10 results
},
// We fill the city field
select: function (event, ui) {
// here I need help to use my object
}
});
}
});
И рабочий фрагмент без Ajax, так как я не могу загрузить свой файл на SO. Вместо этого я использую массив:
$(document).ready(function() {
var data = [
"FR;24001;Périgueux",
"FR;24002;Périgueux",
"FR;24100;Saint-Laurent-des-Vignes",
"FR;24100;Lembras",
"FR;24100;Bergerac"
];
//var autoCompleteData = data.split('\n');
var lines = data;
//Set up the data arrays
var data1 = [];
var data2 = [];
var data3 = [];
var autoCompleteData = Array();
//var headings = lines[0].split(';'); // Splice up the first row to get the headings
for (var j = 0; j < lines.length; j++) {
var values = lines[j].split(';'); // Split up the comma seperated values
//postcodes.push(values[1], values[2]);
autoCompleteData.push(values[1] + '');
//autoCompleteData.push({cp: values[1], city: values[2] + ''});
}
//console.log(autoCompleteData[0][1]);
$("#edit-code-postal").autocomplete({
source: function(request, response) {
var results = $.ui.autocomplete.filter(autoCompleteData, request.term);
response(results.slice(0, 10)); // Display the first 10 results
},
// On remplit aussi la ville
select: function(event, ui) {
$('#edit-ville').val(ui.item.city);
}
});
});
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Autocomplete</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
</head>
<body>
<div class="ui-widget">
<label for="tags">Postal code (try "24...": </label>
<input id="edit-code-postal">
<label for="tags">City: </label>
<input id="edit-ville">
</div>
</body>
</html>
}
//console.log(autoCompleteData[0][1]);
$("#edit-code-postal").autocomplete({
source: function (request, response) {
var results = $.ui.autocomplete.filter(autoCompleteData, request.term);
response(results.slice(0, 10)); // Display the first 10 results
},
// On remplit aussi la ville
select: function (event, ui) {
$('#edit-ville').val(ui.item.city);
}
});
}
});