javascript/html autocomplete textbox
I am developing a web page which has a requirement of many autocompl开发者_如何学运维ete 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?
Here's a solution to create autocomplete with No JQUERY or No JAVASCRIPT.. just plain html5 an input box and a datalist tag..
<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
Use JQuery with the AutoSuggest plugin.
http://docs.jquery.com/Plugins/autocomplete
Include the JS libraries (see the documentation above), then do this in 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:
var data = "Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities".split(" ");
$(".autocomplete").autocomplete(data);
I recommend to check this:
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)'];
The AutoSuggest plugin has been deprecated and is now included in jQuery UI.
Check this out:
http://jqueryui.com/demos/autocomplete/
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
<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>
<!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><!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>
Here is an easy method, just use the onkeyup event :
<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>
加载中,请稍侯......
精彩评论