javascript/html自動完成文本框

Question

我正在開發一個網頁，其中有許多自動完成文本框的要求。由於我是JavaScript新手，因此我非常難以創建自己的自動完成文本框。所以我從互聯網上搜索了很多例子，但它們只適用於單個文本框。這意味着我不能使用相同的js文件來創建另一個自動完成文本框。我沒有在stackoverflow上找到任何這樣的例子。有人可以幫助我嗎？

Answer 1

將JQuery與AutoSuggest插件結合使用。

http://docs.jquery.com/Plugins/autocomplete

加入JS庫（見上面的文檔），然後做在HTML：

<input type="text" class="autocomplete" name="n1" /> 
<input type="text" class="autocomplete" name="n2" /> 
<input type="text" class="autocomplete" name="n3" /> 
<input type="text" class="autocomplete" name="n4" /> 

然後，在JavaScript自動完成添加到CSS類：

var data = "Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities".split(" "); 
$(".autocomplete").autocomplete(data); 

Answer 2

如果您是網絡開發新手，我建議您使用jquery和jqueryUI package。上面的鏈接是演示頁面，您可以在其中使用不同類型的數據源。 我複製，它使用簡單陣列用作數據源

<script> 
    $(function() { 
     var availableTags = [ 
      "ActionScript",   "AppleScript", 
      "Asp",    "BASIC", 
      "C",    "C++", 
      "Clojure",    "COBOL", 
      "ColdFusion",   "Erlang", 
      "Fortran",    "Groovy", 
      "Haskell",    "Java", 
      "JavaScript",   "Lisp", 
      "Perl",    "PHP", 
      "Python",    "Ruby", 
      "Scala",    "Scheme" 
     ]; 
     $(".tags").autocomplete({ 
      source: availableTags 
     }); 
    }); 
    </script> 

<div><input class="tags" type="text" /></div> 
<div><input class="tags" type="text" /></div> 

Answer 3

的AutoSuggest插件已棄用，現在包含在jQuery UI的例子。

檢查了這一點：
http://jqueryui.com/demos/autocomplete/

Answer 4

我建議檢查：

http://complete-ly.appspot.com/

簡單的情況下，應滿足您的要求：

var cly = completely(document.getElementById('a-div-wrapping-your-autocomplete-box'); 
cly.options = [ 'your','array','of','options','(possibly sorted somehow)']; 

Answer 5

這裏有一個簡單的方法，只需使用onkeyup事件：

<input type="text" id="a" onkeyup="myFunction()"> 
<br/> 
<br/> 


<script type="text/javascript"> 
function myFunction() { 

    var x = document.getElementById("a").value; 

    document.getElementById("abc").innerHTML = x; 
} 
</script> 

Answer 6

下面是與無JQUERY或沒有使用Javascript創建自動完成的解決方案.. 只是簡單的HTML5的輸入框和一個DataList標籤..

<input type="text" id="txtAutoComplete" list="languageList"/><!--your input textbox--> 
<datalist id="languageList"> 
<option value="HTML" /> 
<option value="CSS" /> 
<option value="JavaScript" /> 
<option value="SQL" /> 
<option value="PHP" /> 
<option value="jQuery" /> 
<option value="Bootstrap" /> 
<option value="Angular" /> 
<option value="ASP.NET" /> 
<option value="XML" /> 
</datalist> 

瘦肉更多關於它here