使用 JavaScript 對象與 jquery ui 自動完成

Question

我在表單上使用jquery ui 自動完成功能來自動完成文本文件中的城市和郵政編碼。

文本文件的格式如下：

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

自動完成功能適用於相應的字段，但我希望用戶選擇郵政編碼以自動填寫字段城市中的城市。

這就是它不起作用的地方。 我試圖用 label / 值創建一個 object：

autoCompleteData.push({cp: values[1]+'', city: values[2] + ''})

如果我執行console.log() ，我可以看到我的 object 但我很難使用它來響應 jquery ui 自動完成所需的響應。 我已經看到了一些基於 json 響應的示例，但我不知道如何使其適應我的需求。 我也嘗試將我的 object 轉換為 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);
                        }

                    });
                }
            });

Answer 1

您可以在autoCompleteData中推送兩個值，其中一個是label ，我們將在搜索輸入字段值和其他任何變量時使用它，即：在下面的代碼中，我使用了data: values[2]然后我們得到這個值並使用$('#edit-ville').val(ui.item.data);

演示代碼：

 $(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 autoCompleteData = Array(); for (var j = 0; j < lines.length; j++) { var values = lines[j].split(';'); // Split up the comma seperated values autoCompleteData.push({ label: values[1], data: 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.data);//setting value in textfield } }); });

 <,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>

使用 JavaScript 對象與 jquery ui 自動完成

問題描述

1 個解決方案

解決方案1
1 已采納 2020-06-16 13:55:46

使用 JavaScript 對象與 jquery ui 自動完成

問題描述

1 個解決方案

解決方案1 1 已采納 2020-06-16 13:55:46

解決方案1
1 已采納 2020-06-16 13:55:46