Kendo AutoComplete - force users to make valid selection

Question

I've got a few Kendo AutoComplete fields linked to remote data (hundreds of possibilities, so DropDownList is not an option).

How can I force users to make a selection from the displayed list?

I'm also retrieving the additional data that's returned from the data source, e.g.

$("#station").kendoAutoComplete({
    dataSource: stationData,
    minLength: 2,
    dataTextField: 'name',
    select: function(e){
        var dataItem = this.dataItem(e.item.index());
        console.dir(dataItem);
    }
});

I'm doing additional stuff with the data in dataItem and it needs to be a valid selection.

Thanks

SOLVED: I think I was possibly over-complicating things. The answer is pretty simple and is posted below.

Answer 1

The answer the OP posted, in addition to the answer suggested by @Rock'n'muse are definitely good propositions, but both miss an important and desired functional aspect.

When utilizing the solution given by @Mat and implementing the change-vice-close suggestion from @Rock'n'muse, the typed-in value indeed clears from the widget if no selection is made from the filtered data source. This is great; however, if the user types in something valid and selects a value from the filtered list, then places the cursor at the end of the value and types something which now invalidates the value (doesn't return any valid selections from the data source), the typed-in value is not cleared from the widget.

What's happening is that the isValid value remains true if the previously typed-in (and valid) value should be altered. The solution to this is to set isValid to false as soon as the filtering event is triggered. When the user changes the typed-in value, the widget attempts to filter the data source in search of the typed-in value. Setting isValid to false as soon as the filter event is triggered ensures a "clean slate" for the change event as suggested by the solution from @Rock'n'muse.

Because we're setting isValid to false as soon as the filtering event is triggered, we do not need to do so in the open event (as data source filtering must occur before the user will ever see an option to select). Because of this, the open event binding was removed from @Mat's solution. This also means the initial assignment of false upon declaration of isValid is superfluous, but variable assignment upon declaration is always a good idea.

Below is the solution from @Mat along with the suggestions from @Rock'n'muse and with the filtering implementation applied:

var isValid = false;
$("#staton").kendoAutoComplete({
    minLength: 2,
    dataTextField: "name",
    select: function () {
        valid = true;
    },
    change: function (e) {
        // if no valid selection - clear input
        if (!valid) {
            e.sender.value("");
        }
    },
    filtering: function () {
        valid = false;
    },
    dataSource: datasource
});

As an addendum, using the select event binding to set and evaluate a simple boolean value as @Mat proposes is much cleaner, simpler and faster than using a jQuery $.each(...) on the data source in order to make sure the typed-in value matches an actual item of the data source within the change event. This was my first thought at working a solution before I found the solution from @Mat (this page) and such is my reasoning for up-voting his solution and his question.

Answer 2

var valid;
$("#staton").kendoAutoComplete({
  minLength: 2,
  dataTextField: "name",
  open: function(e) {
    valid = false;
  },
  select: function(e){
    valid = true;
  },
  close: function(e){
    // if no valid selection - clear input
    if (!valid) this.value('');
  },
  dataSource: datasource
});

Answer 3

This method allows users to type whatever they like into the AutoComplete if list not opens. There are two corrections to fix this:

1. initialize variable valid as false:

   var valid = false;

2. Check if no valid selection in change event, but not in close:

   ...
   change: function(e){ if (!valid) this.value(''); }