All Components

AutoComplete / Basic usage

Choose shipping countries:

Start typing the name of an European country

HTML5/JavaScript 源码

<!DOCTYPE html>
<html>
 <head> 
  <title>Basic usage</title> 
  <meta charset="utf-8"> 
  <link href="../content/shared/styles/examples-offline.css" rel="stylesheet"> 
  <link href="../../styles/kendo.common.min.css" rel="stylesheet"> 
  <link href="../../styles/kendo.rtl.min.css" rel="stylesheet"> 
  <link href="../../styles/kendo.default.min.css" rel="stylesheet"> 
  <link href="../../styles/kendo.dataviz.min.css" rel="stylesheet"> 
  <link href="../../styles/kendo.dataviz.default.min.css" rel="stylesheet"> 
  <script src="../../js/jquery.min.js"></script> 
  <script src="../../js/kendo.all.min.js"></script> 
  <script src="../content/shared/js/console.js"></script> 
  <script>
        
    </script> 
 </head> 
 <body> 
  <a class="offline-button" href="../index.html">Back</a> 
  <div id="example"> 
   <div class="demo-section k-content"> 
    <h4>Choose shipping countries:</h4> 
    <input id="countries" style="width: 100%;"> 
    <div class="demo-hint">
     Start typing the name of an European country
    </div> 
   </div> 
   <script>
                $(document).ready(function () {
                    var data = [
                            "Albania",
                            "Andorra",
                            "Armenia",
                            "Austria",
                            "Azerbaijan",
                            "Belarus",
                            "Belgium",
                            "Bosnia & Herzegovina",
                            "Bulgaria",
                            "Croatia",
                            "Cyprus",
                            "Czech Republic",
                            "Denmark",
                            "Estonia",
                            "Finland",
                            "France",
                            "Georgia",
                            "Germany",
                            "Greece",
                            "Hungary",
                            "Iceland",
                            "Ireland",
                            "Italy",
                            "Kosovo",
                            "Latvia",
                            "Liechtenstein",
                            "Lithuania",
                            "Luxembourg",
                            "Macedonia",
                            "Malta",
                            "Moldova",
                            "Monaco",
                            "Montenegro",
                            "Netherlands",
                            "Norway",
                            "Poland",
                            "Portugal",
                            "Romania",
                            "Russia",
                            "San Marino",
                            "Serbia",
                            "Slovakia",
                            "Slovenia",
                            "Spain",
                            "Sweden",
                            "Switzerland",
                            "Turkey",
                            "Ukraine",
                            "United Kingdom",
                            "Vatican City"
                        ];

                    //create AutoComplete UI component
                    $("#countries").kendoAutoComplete({
                        dataSource: data,
                        filter: "startswith",
                        placeholder: "Select country...",
                        separator: ", "
                    });
                });
            </script> 
  </div>   
 </body>
</html>