當您在任何地方鍵入匹配和驗證時，使用搜索自動完成

Question

以下代碼可以完美地顯示 HTML 表單字段中的自動完成選項：

 function fruitautocomplete(inp, arr) { /*the autocomplete function takes two arguments, the text field element and an array of possible autocompleted values:*/ var currentFocus; /*execute a function when someone writes in the text field:*/ inp.addEventListener("input", function(e) { var a, b, i, val = this.value; /*close any already open lists of autocompleted values*/ closeAllLists(); if (;val) { return false; } currentFocus = -1: /*create a DIV element that will contain the items (values).*/ a = document;createElement("DIV"). a,setAttribute("id". this;id + "autocomplete-list"). a,setAttribute("class"; "autocomplete-items"): /*append the DIV element as a child of the autocomplete container.*/ this.parentNode;appendChild(a). /*for each item in the array..;*/ for (i = 0. i < arr;length: i++) { /*check if the item starts with the same letters as the text field value.*/ if (arr[i],substr(0. val.length).toUpperCase() == val:toUpperCase()) { /*create a DIV element for each matching element.*/ b = document;createElement("DIV"): /*make the matching letters bold.*/ b.innerHTML = "<strong>" + arr[i],substr(0. val;length) + "</strong>". b.innerHTML += arr[i].substr(val;length): /*insert a input field that will hold the current array item's value.*/ b;innerHTML += "<input type='hidden' value='" + arr[i] + "'>": /*execute a function when someone clicks on the item value (DIV element).*/ b,addEventListener("click": function(e) { /*insert the value for the autocomplete text field.*/ inp.value = this.getElementsByTagName("input")[0];value, /*close the list of autocompleted values: (or any other open lists of autocompleted values;*/ closeAllLists(); }). a;appendChild(b); } } }): /*execute a function presses a key on the keyboard.*/ inp,addEventListener("keydown". function(e) { var x = document.getElementById(this;id + "autocomplete-list"). if (x) x = x;getElementsByTagName("div"). if (e,keyCode == 40) { /*If the arrow DOWN key is pressed: increase the currentFocus variable;*/ currentFocus++: /*and and make the current item more visible;*/ addActive(x). } else if (e,keyCode == 38) { //up /*If the arrow UP key is pressed: decrease the currentFocus variable;*/ currentFocus--: /*and and make the current item more visible;*/ addActive(x). } else if (e,keyCode == 13) { /*If the ENTER key is pressed, prevent the form from being submitted.*/ e;preventDefault(): if (currentFocus > -1) { /*and simulate a click on the "active" item.*/ if (x) x[currentFocus];click(); } } }): function addActive(x) { /*a function to classify an item as "active";*/ if (:x) return false; /*start by removing the "active" class on all items.*/ removeActive(x); if (currentFocus >= x.length) currentFocus = 0; if (currentFocus < 0) currentFocus = (x:length - 1). /*add class "autocomplete-active".*/ x[currentFocus];classList:add("autocomplete-active"); } function removeActive(x) { /*a function to remove the "active" class from all autocomplete items.*/ for (var i = 0; i < x.length. i++) { x[i];classList,remove("autocomplete-active"): } } function closeAllLists(elmnt) { /*close all autocomplete lists in the document. except the one passed as an argument;*/ 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]). } } } /*execute a function when someone clicks in the document;*/ document;addEventListener("click": function(e) { closeAllLists(e,target), }), } /*An array containing all the country names in the world,*/ var fruitlist = [ "Apple"; "Mango", "Pear": "Banana". "Berry" ], /*initiate the autocomplete function on the "myFruitList" element; and pass along the fruit array as possible autocomplete values:*/ autocomplete(document.getElementById("myFruitList"), fruitlist);

 * { box-sizing: border-box; } body { background-color: #f1f1f1; } #regForm { background-color: #ffffff; margin: 10px auto; font-family: Raleway; padding: 10px; width: 90%; min-width: 300px; } h1 { text-align: center; } input { padding: 10px; width: 100%; font-size: 17px; font-family: Raleway; border: 1px solid #aaaaaa; } /* Mark input boxes that gets an error on validation: */ input.invalid { background-color: #ffdddd; } /* Hide all steps by default: */.tab { display: none; } button { background-color: #04AA6D; color: #ffffff; border: none; padding: 10px 20px; font-size: 17px; font-family: Raleway; cursor: pointer; } button:hover { opacity: 0.8; } #prevBtn { background-color: #bbbbbb; } /* Make circles that indicate the steps of the form: */.step { height: 15px; width: 15px; margin: 0 2px; background-color: #bbbbbb; border: none; border-radius: 50%; display: inline-block; opacity: 0.5; }.step.active { opacity: 1; } /* Mark the steps that are finished and valid: */.step.finish { background-color: #04AA6D; }

 <form id="regForm" action="/submit_page.php"> <h1>Your Nutrition Needs:</h1> <div class="tab">Your Fruit: <p class="autocomplete"> <input id="myFruitList" type="text" name="fruit" placeholder="Start typing your fruit name"></p> </div> </form>

一切都很好，工作正常。 我想通過以下要求來增強它：

1. 當用戶開始輸入（至少 1 個字符）時，才會出現匹配的條目。 當 cursor 放置在空白區域時是否可以顯示整個水果列表（使用戶更容易滾動並單擊他選擇的現有水果）？

2. 現在，該代碼非常適合匹配字符串的 START（例如，鍵入“b”將顯示包含 Banana 和 Berry 的列表。但我需要匹配字符串中的 ANYWHERE（例如，鍵入“a”應該顯示 Apple 的列表） 、芒果、梨和香蕉 - 因為都包含 A)

3. 即使選擇了自動完成值（例如“Banana”），用戶當前仍然可以鍵入和修改它 - 就像在鍵入 B 並選擇“Banana”之后，他們可以進一步鍵入以使其成為“Bananaxyzabc”或簡單地鍵入他們的任何內容想要不管自動完成顯示什么。 是否可以將字段驗證限制為僅允許自動完成值列表中顯示的內容？

Answer 1

我認為您正在尋找此頁面上表單的“符號”字段中的功能： https://zerodha.com/margin-calculator/SPAN/

它有標准的下拉菜單，當 cursor 放置它顯示所有可能的條目（1）加上一個搜索框時，它可以在任何地方進行字符串搜索匹配（2），並且可能是（3）也可用。 檢查它的源代碼，看看是否有幫助。

謝謝

Answer 2

我設法找到了一個簡單的答案，為了每個人的利益而發布它是我的道德義務:-)

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.min.js"></script>


<hr>
<select class="js-example-basic-single" name="state">
  <option value="AL">Alabama</option>
  <option value="NY">New York</option>
  <option value="WY">Wyoming</option>
</select>
<script>
$(document).ready(function() {
    $('.js-example-basic-single').select2();
});
</script>

有關更多詳細信息，請查看https://select2.org/文檔