javascript - 更新动态文本框中的现有值时在数组中创建新条目

Question

我有一个数组，其中的源和目标如下所示:

markers.push({
    "Location": "Chicago",
    "IsLocation": "Yes"
});

markers.push({
    "Location": "Los Angeles",
    "IsLocation": "Yes"
});

现在，当我使用动态文本框创建点时，我想在源和目标之间添加所有点。

场景 1:第一个带有输入的动态文本框，例如:abc

markers[0]:Chicago
markers[1]:abc
marker[2]:Los Angeles.

场景 2:第二个带有输入的动态文本框，例如:pqr

markers[0]:Chicago
markers[1]:abc
markers[2]:pqr
marker[3]:Los Angeles.

现在，当我将第二个文本框值从 pqr 更改为 lmn 时，它会在标记数组中创建一个新条目，而不是更新 pqr > 到 lmn。

您可以在控制台中查看:

我该如何阻止它？

// Code goes here

var cnt = 1;
var maxNumberOfTextboxAllowed = 5;

var autocomplete = [];
var markers = [];

markers.push({
  "Location": "Chicago",
  "IsLocation": "Yes"
});

markers.push({
  "Location": "Los Angeles",
  "IsLocation": "Yes"
});

function Generatetextbox() {
  if (cnt <= maxNumberOfTextboxAllowed) {
    var fieldWrapper = $("<div class='fieldwrapper' id='field" + cnt + "'/>");
    var fName = $("<input type='text' class='fieldname' id='Txtopt" + cnt + "'  name='TxtoptNm" + cnt + "'  />");
    fieldWrapper.append(fName);
    fieldWrapper.append('<br />');
    fieldWrapper.append('<br />');
    $("#abc").append(fieldWrapper);
    var newInput = [];
    var newEl = document.getElementById('Txtopt' + cnt);
    var txtboxId = 'Txtopt' + cnt;
    newInput.push(newEl);
    setupAutocomplete(autocomplete, newInput, 0, txtboxId);
    cnt = cnt + 1;
  } else
    alert("Cant create more than 5 textbox")
}


function setupAutocomplete(autocomplete, inputs, i, txtboxId) {
  autocomplete.push((txtboxId));
  var idx = autocomplete.length - 1;
  document.getElementById(autocomplete[idx]).addEventListener("change", function() {
    var autoTextbox = [{
      "Location": document.getElementById(autocomplete[idx]).value,
      "IsLocation": "Yes"
    }]

    var markerLastIndexData = [{
      "Location": markers[markers.length - 1].Location,
      "IsLocation": "Yes"
    }]

   markers.splice(markers.length - 1, 1, autoTextbox);
   markers.splice(markers.length, 0, markerLastIndexData);
   console.log(markers)
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="abc"></div>
<button onclick="Generatetextbox()" class="btn btn-primary" type="button">Add</button>

Answer 1

这将帮助您解决问题。

// Code goes here

var cnt = 1;
var maxNumberOfTextboxAllowed = 5;

var autocomplete = [];
var markers = [];

markers.push({
  "Location": "Chicago",
  "IsLocation": "Yes"
});
markers.push({
  "Location": "Los Angeles",
  "IsLocation": "Yes"
});

function Generatetextbox() {
  if (cnt <= maxNumberOfTextboxAllowed) {
    var fieldWrapper = $("<div class='fieldwrapper' id='field" + cnt + "'/>");
    var fName = $("<input type='text' class='fieldname' id='Txtopt" + cnt + "'  name='TxtoptNm" + cnt + "'  />");
    fieldWrapper.append(fName);
    fieldWrapper.append('<br />');
    fieldWrapper.append('<br />');
    $("#abc").append(fieldWrapper);
    var newInput = [];
    var newEl = document.getElementById('Txtopt' + cnt);
    var txtboxId = 'Txtopt' + cnt;
    newInput.push(newEl);
    setupAutocomplete(autocomplete, newInput, 0, txtboxId);
    cnt = cnt + 1;
  } else
    alert("Cant create more than 5 textbox")
}


function setupAutocomplete(autocomplete, inputs, i, txtboxId) {
  autocomplete.push((txtboxId));
  var idx = markers.length - 1;
  markers[idx+1] = markers[idx];
   markers[idx] = {};
  document.getElementById(txtboxId).addEventListener("change", function() {
var autoTextbox = {
  "Location": this.value,
  "IsLocation": "Yes"
};

   //markers.splice(markers.length - 1, 1, autoTextbox);
   markers[idx] = autoTextbox;
   console.log(markers)
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="abc"></div>
<button onclick="Generatetextbox()" class="btn btn-primary" type="button">Add</button>