Kendo AutoComplete - 强制用户进行有效选择

Mat*_*Mat 9 kendo-ui

我有一些链接到远程数据的Kendo AutoComplete字段(数百种可能性,因此DropDownList不是一个选项).

如何强制用户从显示的列表中进行选择?

我还要检索从数据源返回的其他数据,例如

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

我正在做其他数据dataItem,它需要是一个有效的选择.

谢谢

解决:我想我可能过于复杂了.答案很简单,发布在下面.

Mat*_*Mat 16

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
});
Run Code Online (Sandbox Code Playgroud)


Roc*_*use 8

如果列表未打开,此方法允许用户在自动完成中键入他们喜欢的任何内容.有两个更正来解决这个问题:

  1. 初始化变量有效为false:

    var valid = false;

  2. 检查更改事件中是否没有有效选择,但不是关闭:

    ...
    change: function(e){ if (!valid) this.value(''); }
    
    Run Code Online (Sandbox Code Playgroud)