Edit this page

Restrict User Input

The following example demonstrates how to restrict the user input in the AutoComplete widget.


     <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 AutoComplete UI component
            dataSource: data,
            filter: "startswith",
            placeholder: "Select country...",
            change: function() {
              var found = false;
              var value = this.value();
              var data = this.dataSource.view();

              for(var idx = 0, length = data.length; idx < length; idx++) {
                if (data[idx] === value) {
                  found = true;

              if (!found) {
                alert("Custom values are not allowed");
      <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

For more runnable examples on the Kendo UI AutoComplete, browse its How To documentation folder.

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article