使用JavaScript对象与jquery ui自动完成。

问题描述 投票：0回答：1

我用的是 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

在相应的字段上自动完成工作，但我希望当用户选择一个邮政编码时，自动填写城市的字段城市。

这就是它不能工作的地方。我已经尝试创建一个带有标签值的对象。

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

如果我做一个 console.log()我可以看到我的对象，但我很难使用它，以便在jquery ui autocomplete所需的响应中使用它。我看到了一些基于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);
                        }

                    });
                }
            });
javascript jquery jquery-ui autocomplete
1个回答
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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.