Question

我想更改以下代码，以便在单击自动完成选项之一时可以提交链接到自动完成的表单。例如，如果我键入“ lu”，则只有选项“ Blue”才可见。我想在单击“蓝色”时立即填写表格，而不必单击“提交”按钮。谢谢大家的帮助。

function autocomplete(inp, arr) {
  var currentFocus;
  inp.addEventListener("input", function(e) {
    var a, b, i, val = this.value;
    closeAllLists();
    if (!val) {
      return false;
    }
    currentFocus = -1;
    a = document.createElement("DIV");
    a.setAttribute("id", this.id + "autocomplete-list");
    a.setAttribute("class", "autocomplete-items");
    this.parentNode.appendChild(a);

    for (i = 0; i < arr.length; i++) {
      let ind = arr[i].toUpperCase().indexOf(val.toUpperCase());
      if (ind >= 0) {
        b = document.createElement("DIV");
        b.innerHTML = arr[i].substr(0, ind);
        b.innerHTML += "<strong>" + arr[i].substr(ind, val.length) + "</strong>";
        b.innerHTML += arr[i].substr(ind + val.length);
        b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
        b.addEventListener("click", function(e) {
          inp.value = this.getElementsByTagName("input")[0].value;
          closeAllLists();
        });
        a.appendChild(b);
      }
    }
  });

  inp.addEventListener("keydown", function(e) {
    let x = document.getElementById(this.id + "autocomplete-list");
    if (x) x = x.getElementsByTagName("div");
    if (e.keyCode == 40) {
      currentFocus++;
      addActive(x);
    } else if (e.keyCode == 38) {
      currentFocus--;
      addActive(x);
    } else if (e.keyCode == 13) {
      e.preventDefault();
      if (currentFocus > -1) {
        if (x) x[currentFocus].click();
        // I WANT TO SUBMIT "myForm" HERE
      }
    }
  });

  function addActive(x) {
    if (!x) return false;
    removeActive(x);
    if (currentFocus >= x.length) currentFocus = 0;
    if (currentFocus < 0) currentFocus = (x.length - 1);
    x[currentFocus].classList.add("autocomplete-active");
  }

  function removeActive(x) {
    for (var i = 0; i < x.length; i++) {
      x[i].classList.remove("autocomplete-active");
    }
  }

  function closeAllLists(elmnt) {

    var x = document.getElementsByClassName("autocomplete-items");
    for (var i = 0; i < x.length; i++) {
      if (elmnt != x[i] && elmnt != inp) {
        x[i].parentNode.removeChild(x[i]);
      }
    }
  }

  document.addEventListener("click", function(e) {
    closeAllLists(e.target);
  });
}


var options = ["Option A", "Blue"];

autocomplete(document.getElementById("myInput"), options);

<form id="myForm" autocomplete="off" action="{% url 'action' %}">
  <div class="autocomplete" style="width:40%;">
    <input id="myInput" type="text" name="symbol" placeholder="Placeholder">
  </div>
  <input type="submit">
</form>

Answer 1

很容易。只需将“ myForm”标识的表单作为参数传递，然后提交该表单。

function autocomplete(inp, inp1, arr) {
var currentFocus;
inp.addEventListener("input", function(e) {
var a, b, i, val = this.value;
closeAllLists();
if (!val) {
  return false;
}
currentFocus = -1;
a = document.createElement("DIV");
a.setAttribute("id", this.id + "autocomplete-list");
a.setAttribute("class", "autocomplete-items");
this.parentNode.appendChild(a);

for (i = 0; i < arr.length; i++) {
  let ind = arr[i].toUpperCase().indexOf(val.toUpperCase());
  if (ind >= 0) {
    b = document.createElement("DIV");
    b.innerHTML = arr[i].substr(0, ind);
    b.innerHTML += "<strong>" + arr[i].substr(ind, val.length) + "</strong>";
    b.innerHTML += arr[i].substr(ind + val.length);
    b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
    b.addEventListener("click", function(e) {
      inp.value = this.getElementsByTagName("input")[0].value;
      closeAllLists();
      $(inp1).submit();
    });
    a.appendChild(b);
  }
}
});

inp.addEventListener("keydown", function(e) {
let x = document.getElementById(this.id + "autocomplete-list");
if (x) x = x.getElementsByTagName("div");
if (e.keyCode == 40) {
  currentFocus++;
  addActive(x);
} else if (e.keyCode == 38) {
  currentFocus--;
  addActive(x);
} else if (e.keyCode == 13) {
  e.preventDefault();
  if (currentFocus > -1) {
    if (x) x[currentFocus].click();
  }
}
});

function addActive(x) {
if (!x) return false;
removeActive(x);
if (currentFocus >= x.length) currentFocus = 0;
if (currentFocus < 0) currentFocus = (x.length - 1);
x[currentFocus].classList.add("autocomplete-active");
}

function removeActive(x) {
for (var i = 0; i < x.length; i++) {
  x[i].classList.remove("autocomplete-active");
}
}

function closeAllLists(elmnt) {

var x = document.getElementsByClassName("autocomplete-items");
for (var i = 0; i < x.length; i++) {
  if (elmnt != x[i] && elmnt != inp) {
    x[i].parentNode.removeChild(x[i]);
  }
}
}

document.addEventListener("click", function(e) {
closeAllLists(e.target);
});
}


var options = ["Option A", "Blue"];

autocomplete(document.getElementById("myInput"), 
document.getElementById("myForm"), options);

jQuery自动完成提交表单

1 个答案: