New to Kendo UI for jQuery? Download free 30-day trial

Show No-Records-Found Messages

The following example demonstrates how to add a customized template when the entered values do not match any of the suggestions in the AutoComplete.

    <div id="example">
      <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>

        $(document).ready(function () {
          var data = [
            "Bosnia & Herzegovina",
            "Czech Republic",
            "San Marino",
            "United Kingdom",
            "Vatican City"

          // Create the UI of the AutoComplete.
          var widget = $("#countries").kendoAutoComplete({
            dataSource: data,
            filter: "startswith",
            placeholder: "Select country...",
            headerTemplate: '<div class="noDataMessage">No results found</div>',
            separator: ", ",
            dataBound: function() {
              var noItems = this.list.find(".noDataMessage");

              if (!this.dataSource.view()[0]) {
              } else {
            close: function(e) {
              var widget = e.sender;

              if (!widget.shouldClose && !this.dataSource.view()[0]) {

          widget.element.on("blur", function() {
            widget.shouldClose = true;


            widget.shouldClose = false;
      <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: 100px auto;

          width: 250px;
          vertical-align: middle;

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

See Also

In this article
Not finding the help you need? Improve this article