Monday, February 17, 2014

Kando -AutoComplete / Basic usage

Posted by  on  



<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="styles/kendo.common.min.css" rel="stylesheet" />
    <link href="styles/kendo.default.min.css" rel="stylesheet" />
    <script src="js/jquery.min.js"></script>
    <script src="js/kendo.all.min.js"></script>
</head>
<body>
    
        <div id="example" class="k-content">

   <div id="shipping">
                <label for="countries" class="info">Choose shipping countries:</label>

                <input id="countries" />

                <div class="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>
            <style scoped>
                .info {
                    display: block;
                    line-height: 22px;
                    padding: 0 5px 5px 0;
                    color: #36558e;
                }

                #shipping {
                 width: 482px;
                 height: 152px;
                 padding: 110px 0 0 30px;
                 background: url('../../content/web/autocomplete/shipping.png') transparent no-repeat 0 0;
                    margin: 30px auto;
                }

                .k-autocomplete
                {
                    width: 250px;
                    vertical-align: middle;
                }

                .hint {
                    line-height: 22px;
                    color: #aaa;
                    font-style: italic;
                    font-size: .9em;
                    color: #7496d4;
                }
            </style>
        </div>


</body>
</html>
If you are searching life partner. your searching end with kpmarriage.com. now kpmarriage.com offer free matrimonial website which offer free message, free chat, free view contact information. so register here : kpmarriage.com- Free matrimonial website

0 comments:

Post a Comment