javascript-ej1-demos/autocomplete/autofill.html

67 строки
2.7 KiB
HTML

<!doctype html>
<html>
<head>
<title>Essential JS 1 : Autocomplete AutoFill</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8" />
<link href="../content/bootstrap.min.css" rel="stylesheet">
<link href="../content/ejthemes/default-theme/ej.web.all.min.css" rel="stylesheet" />
<link href="../content/default.css" rel="stylesheet" />
<link href="../content/default-responsive.css" rel="stylesheet" />
<!--[if lt IE 9]>
<script src="../scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
<!--<![endif]-->
<script src="../scripts/ej.web.all.min.js" type="text/javascript"></script>
<script src="../scripts/properties.js" type="text/javascript"></script>
</head>
<body>
<div class="content-container-fluid">
<div class="row">
<div class="cols-sample-area">
<div class="frame">
<div class="control">
<input type="text" id="selectFlower" />
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
// declaration
var flowers = [
"Anemone Galilee", "Allium drumstick", "Artichoke thistle",
"Boronia ", "Bouvardia", "Blue lace flower", "Bird of paradise",
"Cone flower", "Cosmos", "Calla lily white", "Common Yarrow",
"Dahlia", "Daffodil", "Delphinium Belladonna",
"Eric John", "Eucalyptus seeded",
"Freesia", "Foxtail fern", "Feverfew",
"Godetia", "Gardenia", "Gayfeather",
"Heather", "Hydrangea",
"Ivy",
"Japhette orchid",
"Kangaroo paw yellow",
"Lace fern", "Lumex", "Lavender",
"Mimosa", "Moon orchid", "Ming fern",
"Nerine",
"Paper Reed", "Pincushion", "Phlox",
"Queen Anne's lace",
"Red Rover", "Rice flower", "Rose Lavanda",
"Strawberry banksia", "Saponaria", " Sunflower Sunbright",
"Thorow-wax", "Telstar", "Tuberose", "Tulip pink",
"Waxflower", "Willow curly", "Watsonia"
];
$('#selectFlower').ejAutocomplete({
dataSource: flowers,
width: "100%",
watermarkText: "Select a flower",
enableAutoFill: true
});
});
</script>
</body>
</html>