blocks|key|582558|text|在AutoSuggest插件中使用JQuery。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|582559|http://docs.jquery.com/Plugins/autocomplete|offset|length|582560|包含JS库(请参阅上面的文档)，然后在HTML中执行此操作：|582561|<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"+/>|code-block|syntax|javascript|582562|然后在Javascript中的CSS-class中添加一个自动完成：|582563|var+data+=+"Core+Selectors+Attributes+Traversing+Manipulation+CSS+Events+Effects+Ajax+Utilities".split("+");
$(".autocomplete").autocomplete(data);|582564|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|17|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Y|8|@]|9|@$D|Z|E|10|1|11]]|A|$]]|$1|F|3|G|5|6|7|12|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|13|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|14|8|@]|9|@]|A|$]]|$1|O|3|P|5|J|7|15|8|@]|9|@]|A|$K|L]]|$1|Q|3|-4|5|6|7|16|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|C]]]]

<p>Use JQuery with the AutoSuggest plugin.</p>

<p><a href="http://docs.jquery.com/Plugins/autocomplete" rel="noreferrer">http://docs.jquery.com/Plugins/autocomplete</a></p>

<p>Include the JS libraries (see the documentation above), then do this in HTML:</p>

<pre><code>&lt;input type="text" class="autocomplete" name="n1" /&gt;
&lt;input type="text" class="autocomplete" name="n2" /&gt;
&lt;input type="text" class="autocomplete" name="n3" /&gt;
&lt;input type="text" class="autocomplete" name="n4" /&gt;
</code></pre>

<p>Then add an Autocomplete to the CSS-class in your Javascript:</p>

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


blocks|key|798621|text|如果你是web开发的新手，我建议你使用jquery和jqueryUI+package。上面的链接是演示页面，在那里您可以使用不同类型的数据源。我复制了一个使用简单数组作为数据源的示例|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|798622|<script>
++++$(function()+{
++++++++var+availableTags+=+[
++++++++++++"ActionScript",+++++++++"AppleScript",
++++++++++++"Asp",++++++++++++++"BASIC",
++++++++++++"C",++++++++++++++++"C%2B%2B",
++++++++++++"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>|code-block|syntax|javascript|798623|entityMap|0|LINK|mutability|MUTABLE|url|http://jqueryui.com/demos/autocomplete/^0|Q|G|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>If you are new to web development I'd recommend you to use jquery and <a href="http://jqueryui.com/demos/autocomplete/" rel="nofollow">jqueryUI package</a>. The link above is to demo page where you can play with different types of datasources.
I've copied an example which uses simple array as a datasource</p>

<pre><code>&lt;script&gt;
    $(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
        });
    });
    &lt;/script&gt;

&lt;div&gt;&lt;input class="tags" type="text" /&gt;&lt;/div&gt;
&lt;div&gt;&lt;input class="tags" type="text" /&gt;&lt;/div&gt;
</code></pre>


blocks|key|798651|text|jQuery+UI中包含了AutoSuggest插件，该插件已被弃用。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|798652|看看这个：|798653|http://jqueryui.com/demos/autocomplete/|798654|entityMap|0|LINK|mutability|MUTABLE|url^0|0|9|D|B|0|0|0|13|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]|$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|V|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|W|8|@]|D|@$9|X|A|Y|1|Z]]|E|$]]|$1|J|3|-4|5|6|7|10|8|@]|D|@]|E|$]]]|K|$L|$5|M|N|O|E|$P|I]]]]

<p>The <code>AutoSuggest</code> plugin has been deprecated and is now included in <code>jQuery UI</code>.</p>

<p>Check this out:<br>
<a href="http://jqueryui.com/demos/autocomplete/" rel="nofollow noreferrer">http://jqueryui.com/demos/autocomplete/</a></p>


blocks|key|798673|text|我建议您检查以下内容：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|798674|http://complete-ly.appspot.com/|offset|length|798675|这个简单的案例应该能满足您的需求：|798676|var+cly+=+completely(document.getElementById('a-div-wrapping-your-autocomplete-box');
cly.options+=+[+'your','array','of','options','(possibly+sorted+somehow)'];|code-block|syntax|javascript|798677|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|V|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@]|9|@$D|V|E|W|1|X]]|A|$]]|$1|F|3|G|5|6|7|Y|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|Z|8|@]|9|@]|A|$K|L]]|$1|M|3|-4|5|6|7|10|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|C]]]]

<p>I recommend to check this: </p>

<p><a href="http://complete-ly.appspot.com/">http://complete-ly.appspot.com/</a> </p>

<p>The simple case should meet your requirements: </p>

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


blocks|key|582712|text|这里有一个简单的方法，只需使用onkeyup事件：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|582713|<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>|code-block|syntax|javascript|582714|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Here is an easy method, just use the onkeyup event :</p>
<pre><code>&lt;input type=&quot;text&quot; id=&quot;a&quot; onkeyup=&quot;myFunction()&quot;&gt;
&lt;br/&gt;
&lt;br/&gt;

&lt;script type=&quot;text/javascript&quot;&gt;
  function myFunction() {
    var x = document.getElementById(&quot;a&quot;).value;
    document.getElementById(&quot;abc&quot;).innerHTML = x;   
  }
&lt;/script&gt;
</code></pre>


blocks|key|798767|text|这里有一个不使用JQUERY或不使用JAVASCRIPT创建自动补全的解决方案。只需简单地html5一个输入框和一个datalist标记。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|798768|<input+type="text"+id="txtAutoComplete"+list="languageList"/>
<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>|code-block|syntax|javascript|798769|了解更多关于它的信息here|offset|length|798770|entityMap|0|LINK|mutability|MUTABLE|url|http://www.cheezycode.com/2015/09/create-auto-complete-dropdown-using.html^0|0|0|A|4|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>Here's a solution to create autocomplete with No JQUERY or No JAVASCRIPT..
just plain html5 an input box and a datalist tag..</p>

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

<p>lean more about it <a href="http://www.cheezycode.com/2015/09/create-auto-complete-dropdown-using.html">here</a></p>


blocks|key|798794|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|798795|<!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%2B%2B",
++++++"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>|code-block|syntax|javascript|798796|798797|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|K|8|@]|9|@]|A|$E|F]]|$1|G|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|M|8|@]|9|@]|A|$]]]|I|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;title&gt;jQuery UI Autocomplete - Default functionality&lt;/title&gt;
  &lt;link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"&gt;
  &lt;link rel="stylesheet" href="/resources/demos/style.css"&gt;
  &lt;script src="https://code.jquery.com/jquery-1.12.4.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  $( 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
    });
  } );
  &lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
 
&lt;div class="ui-widget"&gt;
  &lt;label for="tags"&gt;Tags: &lt;/label&gt;
  &lt;input id="tags"&gt;
&lt;/div&gt;
 
 
&lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>


blocks|key|798806|text|<!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%2B%2B",
++++++"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>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|798807|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]


<pre class="lang-html prettyprint-override"><code>&lt;!doctype html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
  &lt;meta charset=&quot;utf-8&quot;&gt;
  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
  &lt;title&gt;jQuery UI Autocomplete - Default functionality&lt;/title&gt;
  &lt;link rel=&quot;stylesheet&quot; href=&quot;//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css&quot;&gt;
  &lt;link rel=&quot;stylesheet&quot; href=&quot;/resources/demos/style.css&quot;&gt;
  &lt;script src=&quot;https://code.jquery.com/jquery-1.12.4.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;https://code.jquery.com/ui/1.12.1/jquery-ui.js&quot;&gt;&lt;/script&gt;
  &lt;script&gt;
  $( function() {
    var availableTags = [
      &quot;ActionScript&quot;,
      &quot;AppleScript&quot;,
      &quot;Asp&quot;,
      &quot;BASIC&quot;,
      &quot;C&quot;,
      &quot;C++&quot;,
      &quot;Clojure&quot;,
      &quot;COBOL&quot;,
      &quot;ColdFusion&quot;,
      &quot;Erlang&quot;,
      &quot;Fortran&quot;,
      &quot;Groovy&quot;,
      &quot;Haskell&quot;,
      &quot;Java&quot;,
      &quot;JavaScript&quot;,
      &quot;Lisp&quot;,
      &quot;Perl&quot;,
      &quot;PHP&quot;,
      &quot;Python&quot;,
      &quot;Ruby&quot;,
      &quot;Scala&quot;,
      &quot;Scheme&quot;
    ];
    $( &quot;#tags&quot; ).autocomplete({
      source: availableTags
    });
  } );
  &lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
 
&lt;div class=&quot;ui-widget&quot;&gt;
  &lt;label for=&quot;tags&quot;&gt;Tags: &lt;/label&gt;
  &lt;input id=&quot;tags&quot;&gt;
&lt;/div&gt;
 
 
&lt;/body&gt;
&lt;/html&gt;
</code></pre>


<p>I am developing a web page which has a requirement of many autocomplete textboxes. As I am new to javascript, it is very tough for me to make my own autocomplete textbox. So I have searched many examples from the internet, but they only work for a single textbox. This means I cannot use the same js file to make another autocomplete textbox. I didn't find any such examples on stackoverflow either. Can someone help me in this? </p>


javascript/html autocomplete textbox

jQuery

Python

Erlang

Java

Perl

我正在开发一个网页，其中有许多自动完成文本框的要求。因为我是javascript的新手，所以制作自己的自动补全textbox对我来说非常困难。因此，我从互联网上搜索了许多示例，但它们只适用于单个文本框。这意味着我不能使用相同的js文件来制作另一个自动完成的文本框。我在stackoverflow上也没有找到任何这样的例子...

问javascript/html自动完成文本框
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问javascript/html自动完成文本框EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问javascript/html自动完成文本框
EN