输入自动完成功能不适用于标签和值

Question

i use below code to input auto-complete, Since i have multiple value so i added label to display but after adding label my auto-complete function doesn't do anything.

Can some one help me solve to this issue.

 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++) { if (arr[i].substr(0, val.length).toUpperCase() === val.toUpperCase()) { b = document.createElement("DIV"); b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>"; b.innerHTML += arr[i].substr(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) { var 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 countries = ["Afghanistan", "Albania", "Algeria", "Andorra", "Angola", "Anguilla", "Antigua & Barbuda", "Argentina", "Armenia"]; autocomplete(document.getElementById("myInput"), countries); 

 <div class="autocomplete" style="width:300px;"> <input id="myInput" type="text" name="myCountry" placeholder="Country"> <input type="hidden" name="Country"> </div> 

So to make label i done this and it doesn't work

i changed

var countries = [{
                    "value": "Afghanistan, Pakistan",
                    "label": "Afghanistan"
                },
                {
                    "value": "Albania, Balkans",
                    "label": "Albania"
                }];

Note : i need to show label while typing and after selected because i need to store multiple input value.

Answer 1

This is how I fixed it:

var itemLabel = arr[i].label,
    itemValue = arr[i].value;

Use one of these wherever you are using arr[i] directly. I am searching user-entered input on label but you can add on value , if needed.

You can check this fiddle for further details: https://jsfiddle.net/yeshas93/pg2dsj3u/1/

Hope this helps. Please let me know in the comments if you have any doubts.

Edit

Just for reference, you can check select2.js . It provides auto-complete feature with many other features on select-boxes. Here is the link .

Edit Reference https://jsfiddle.net/yeshas93/pg2dsj3u/

Answer 2

You can use datalist HTML to do this tag.

<input id="myInput" list="" type="text" name="myCountry" placeholder="Country">

<datalist id="countries">
  <option value="Afghanistan">
  <option value="Albania">
  <option value="Algeria">
</datalist>

In option tag, you can add all your countries list.