Question

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

Answer 1

这是使用No JQUERY或No 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

Answer 2

将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-class添加一个自动完成：

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

Answer 3

我建议检查一下：

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 4

AutoSuggest插件已弃用，现已包含在jQuery UI中。

检查出来：
http://jqueryui.com/demos/autocomplete/

Answer 5

如果您不熟悉Web开发，我建议您使用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 6

<!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>

Answer 7

您可以使用dataList这是自动完成文本框的简便方法

Answer 8

<!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>

javascript / html自动完成文本框

8 个答案: