AutoComplete

by franH

HTML

<script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.blueopal.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.mobile.all.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.common.min.css">
<div data-role="view" data-layout="default" id="Home" >
 <label for="input" class="info">Choose Town to work with:</label>
<input id="autoComplete" />
</div>

<section data-role="layout" data-id="default">
<header data-role="header">
<div data-role="navbar">QC Mobile</div>
</header>
<!-- View content will render here-->


 
<footer data-role="footer">
   <div data-role="tabstrip">
        <a href="#Home">Home</a>
         <a href="about.html">About</a> 
        <a href="flat.html">View Data</a>       
    </div> 
</footer>
</section>

JavaScript

var app = new kendo.mobile.Application(document.body, {

    transition: 'slide'
});

$(document).ready(function() {
    $("#autoComplete").kendoAutoComplete({
        minLength: 7,
        dataTextField: "title",
        filter: "contains",
        placeholder: "Select town...",
        animation: {
            open: {
                effects: "fadeIn",
                duration: 2000,
                show: true
            }
        },
        
        close: function(e) {
            var str1 = "Dropdown Item Selected:" + " " + e.item;
            alert(str1);
        },
        dataSource: new kendo.data.DataSource({
            transport: {
                read: {
                    url: "http://api.geonames.org/wikipediaSearchJSON",
                    dataType: "jsonp",
                    data: {
                        q: function() {
                            return $("#autoComplete").data("kendoAutoComplete").value();
                        },
                        maxRows: 10,
                        username: "pete"

                    }
                }
            },
            schema: {
                data: "geonames"
            }
        }),
        change: function() {
            this.dataSource.read();
        }
    })
});