Kendo UI

jQuery + Kendo UI + MockJax

by Scott Guthrie

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.common.min.css">
<script src="http://cdn.kendostatic.com/2012.2.913/js/kendo.all.min.js"></script>
<div id="grid">
    <p>Trent, Bubba, Frank, Larry, Jonna are valid searches in auto complete or just type an email address and click add. (note i didn't do the email validation here yet.</p>
    <form method="post" action="/echo/xml/">
    <div>
        <input id='autocomplete' class='auto'/><input id='btnAdd' type='button' value='add'/>
    </div>
        
        <!--<input id='btnSubmit' type='submit' value='do this'/>-->
</form>
    <div id='target'></div>
    
        <ul id='result' class='result'></ul>
</div>

CSS

form {
    padding: 10px;
}
p {
    padding: 10px;
    background-color: 'pale yellow';
}

.result {
    margin-top: 10px;
    margin-left: 10px;
    display: inline-block;
    width: 250px;
    border: 1px solid #CCC;
    list-style-type: none; 
    list-style-image: none;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

.result li {
    display: inline-block;
    margin: 5px;
    background:#CCC;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

.result li a {
    color:#000;
    padding: 5px;
    font-size:14px;
    text-decoration: none;
}

.k-autocomplete{
 width: 300px;
}

JavaScript

$("#states-kendo").kendoDropDownList();

var count = 1;

var items = [{
    ID: 1,
    Name: "Trent Jones"},
{
    ID: 2,
    Name: "Bubba Smith"},
{
    ID: 3,
    Name: "Frank Johnson"},
{
    ID: 4,
    Name: "Larry Larrelton"},
{
    ID: 5,
    Name: "Jonna Jackson"}];


$("#autocomplete").kendoAutoComplete({
    dataSource: items,
    dataTextField: "Name",
    placeholder: "search for person or add email addreess...",

    select: function(e) {
        //$("#result").append("<li>" + e.item.html() + " <a href='#' class='remove' alt='remove' title='remove'>[x]</a></li>");
        //alert(e.item.html());
    },
    change: function(e) {
        //alert('change');
    },
    close: function(e) {
        //$("#autocomplete").data("kendoAutoComplete").value("");
    }
});

$("#btnSubmit").click(function(e) {
    e.preventDefault();
    $("#target").html("doing ajaxy " + count++);

});

$("#autocomplete").keypress(function(e) {
    //if (e.keyCode == 13) {
    //e.preventDefault();
    //}
});

$("div#grid").on("click","a.remove",function(e){
    $(this).closest("li").remove();
});

$("#btnAdd").click(function(e) {
    var item = $("#autocomplete").val();
    $("#result").append("<li><a href='#' class='person'>" + item + "</a><a href='#' class='remove' alt='remove' title='remove'>[x]</a></li>");
    $("#autocomplete").data("kendoAutoComplete").value("");
});