刪除表單標籤，但保持輸入功能

Question

我發現了一段代碼，它非常接近我想要的。最終的結果是，當您在輸入字段中鍵入內容時，會根據文本輸入顯示下面的相關選項列表。然後，您可以單擊其中一個選項，而不必鍵入完整的字符串。

唯一的問題是，當我嘗試並將此代碼調整到我現有的項目時，它因爲輸入字段被封裝在窗體中而中斷。我將如何修改此代碼，使其以完全相同的方式運行，而不必將輸入標記包裝在表單元素中？即只需要一個輸入字段。

(
 
    function() 
 
    { 
 

 
     var lookFor = [ 
 
      "Paris", 
 
      "Canada", 
 
      "England", 
 
      "Scotland", 
 
      "Brazil", 
 
      "Manila", 
 
      "Atlanta" 
 
     ]; 
 

 
     var form = document.getElementById("theForm"); 
 
     var resultsDiv = document.getElementById("results"); 
 
     var searchInput = form.search; 
 

 
     // first, position the results: 
 
     var node = searchInput; 
 
     var x = 0; 
 
     var y = 0; 
 
     while (node != null) 
 
     { 
 
      x += node.offsetLeft; 
 
      y += node.offsetTop; 
 
      node = node.offsetParent; 
 
     } 
 
     resultsDiv.style.left = x + "px"; 
 
     resultsDiv.style.top = (y + 20) + "px"; 
 
     
 
     // now, attach the keyup handler to the search field: 
 
     searchInput.onkeyup = function() 
 
     { 
 
      var txt = this.value.toLowerCase(); 
 
      if (txt.length == 0) return; 
 

 
      var txtRE = new RegExp("(" + txt + ")", "ig"); 
 
      // now...do we have any matches? 
 
      var top = 0; 
 
      for (var s = 0; s < lookFor.length; ++s) 
 
      { 
 
       var srch = lookFor[s]; 
 
       if (srch.toLowerCase().indexOf(txt) >= 0) 
 
       { 
 
        srch = srch.replace(txtRE, "<span>$1</span>"); 
 
        var div = document.createElement("div"); 
 
        div.innerHTML = srch; 
 
        div.onclick = function() { 
 
         searchInput.value = this.innerHTML.replace(/\<\/?span\>/ig,""); 
 
         resultsDiv.style.display = "none"; 
 
        }; 
 
        div.style.top = top + "px"; 
 
        top += 20; 
 
        resultsDiv.appendChild(div); 
 
        resultsDiv.style.display = "block"; 
 
       } 
 
      } 
 
     } 
 
     // and the keydown handler: 
 
     searchInput.onkeydown = function() 
 
     { 
 
      while (resultsDiv.firstChild != null) 
 
      { 
 
       resultsDiv.removeChild(resultsDiv.firstChild);   
 
      } 
 
      resultsDiv.style.display = "none"; 
 
     } 
 
     
 
    } 
 
)();

.searchInput { 
 
    width: 200px; 
 
} 
 
#results { 
 
    display: none; 
 
    position: absolute; 
 
    width: 200px; 
 
    background-color: lightyellow; 
 
    z-index: 10; 
 
} 
 
#results div { 
 
    position: absolute; 
 
    width: 200px; 
 
    height: 20px; 
 
    background-color: white; 
 
    cursor: pointer; 
 
    overflow: hidden; 
 
} 
 
    
 
#results div:hover {background: lightblue;} 
 
    
 
#results div span { 
 
    color: red; 
 
    font-weight: bold; 
 
}

<form id="theForm"> 
 
Search for: <input name="search" class="searchInput"/> 
 
</form> 
 

 
<div id="results"></div>

Answer 1

因爲這部分代碼它依賴於form元素得到input元素：

var form = document.getElementById("theForm"); 
    var resultsDiv = document.getElementById("results"); 
    var searchInput = form.search; 

比不需要form其他。因此，你可以改爲使它：

var resultsDiv = document.getElementById("results"); 
    var searchInput = document.getElementsByClassName("searchInput")[0]; 

或替代改變你input元素有"searchInput"的id而不是class做：

var resultsDiv = document.getElementById("results"); 
    var searchInput = document.getElementById("searchInput");