Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
  <head>
    <title>KendoUI Test Page</title>
    <link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.default.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.dataviz.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.mobile.all.min.css" rel="stylesheet" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>          
  </head>
  <body>
    <input id="products" />
    <script>
      $(document).ready(function() {
        $("#products").kendoAutoComplete({
          dataTextField: "ProductName",
          filter: "contains",
          minLength: 3,
          dataSource: {
            type: "odata",
            serverFiltering: true,
            serverPaging: true,
            pageSize: 20,
            transport: {
              read: "http://demos.kendoui.com/service/Northwind.svc/Products"
            }
          }
        });
      });
    </script>
    
    <style scoped>
      .k-widget.k-autocomplete.k-header.k-state-default{
        width:250px;        
      }
      
      #products{
        background-color:#eee;        
      }
    </style>
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
kiril.nikolov@gmail.compro
0viewers