logo标签列表

JavaScript/HTML自动完成文本框

javascripthtml
25

我正在开发一个网页，需要使用很多自动完成文本框。由于我是javascript新手，所以很难制作自己的自动完成文本框。因此，我在互联网上搜索了许多示例，但它们仅适用于单个文本框。这意味着我无法使用同一js文件来创建另一个自动完成文本框。我在stackoverflow上也没有找到任何这样的示例。有人可以帮助我吗？

8个回答
41

这是一种无需 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>

了解更多信息，请点击这里

1
谢谢你。其他人似乎认为我想在代码中添加另一个依赖项，而像这样的简单解决方案恰好满足要求，而不需要额外的负担。 - Rekamanon
1
公平地说，在Cheezy之前很多人已经回答了，当时浏览器中的html5实现还不稳定或者不存在。随着时间的推移，一些解决方案变得比其他方案更有用。 - ty812
16

使用AutoSuggest插件结合JQuery。

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);
12

我建议检查这个：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)'];
7
2
如果你是新手网页开发者，我建议你使用jQuery和jQueryUI包。上面的链接是演示页面，你可以在其中尝试不同类型的数据源。 我复制了一个例子，它使用简单的数组作为数据源。
<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>
1

这里有一个简单的方法，只需使用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>
1

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Autocomplete - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <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>
</head>
<body>
 
<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>
 
 
</body>
</html>

1
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Autocomplete - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <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>
</head>
<body>
 
<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>
 
 
</body>
</html>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接