javascript/html 自动完成文本框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7203251/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
javascript/html autocomplete textbox
提问by Arvind Thakur
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?
我正在开发一个需要许多自动完成文本框的网页。由于我是 javascript 新手，所以我很难制作自己的自动完成文本框。所以我从互联网上搜索了许多示例，但它们仅适用于单个文本框。这意味着我不能使用相同的 js 文件来制作另一个自动完成文本框。我也没有在 stackoverflow 上找到任何这样的例子。有人可以帮助我吗？
采纳答案by ty812
Use JQuery with the AutoSuggest plugin.
将 JQuery 与 AutoSuggest 插件配合使用。
http://docs.jquery.com/Plugins/autocomplete
http://docs.jquery.com/Plugins/autocomplete
Include the JS libraries (see the documentation above), then do this in HTML:
包含 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" />
Then add an Autocomplete to the CSS-class in your Javascript:
然后在您的 Javascript 中向 CSS 类添加自动完成功能：
var data = "Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities".split(" ");
$(".autocomplete").autocomplete(data);
回答by Cheezy Code
Here's a solution to create autocomplete with No JQUERY or No JAVASCRIPT.. just plain html5 an input box and a datalist tag..
这是一个使用 No JQUERY 或 No JAVASCRIPT 创建自动完成的解决方案。
<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>
lean more about it here
在这里了解更多
回答by wonderboy
I recommend to check this:
我建议检查这个：
http://complete-ly.appspot.com/
http://complete-ly.appspot.com/
The simple case should meet your requirements:
简单的案例应该满足您的要求：
var cly = completely(document.getElementById('a-div-wrapping-your-autocomplete-box');
cly.options = [ 'your','array','of','options','(possibly sorted somehow)'];
回答by Lior Frenkel
The AutoSuggestplugin has been deprecated and is now included in jQuery UI.
该AutoSuggest插件已被弃用，现在包含在jQuery UI.
Check this out:
http://jqueryui.com/demos/autocomplete/
回答by Cheburek
If you are new to web development I'd recommend you to use jquery and jqueryUI package. 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
如果您不熟悉Web 开发，我建议您使用 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>
回答by CodingSoft
Here is an easy method, just use the onkeyup event :
这是一个简单的方法，只需使用 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>
回答by saketh
You can use dataList it is easy way for autocomplete text box
您可以使用 dataList 这是自动完成文本框的简单方法
回答by nazmulhaqued
<!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>