Kendo AutoComplete - заставить пользователей делать правильный выбор

Question

У меня есть несколько полей Kendo AutoComplete, связанных с удаленными данными (сотни возможностей, поэтому DropDownList не является вариантом).

Как заставить пользователей сделать выбор из отображаемого списка?

Я также получаю дополнительные данные, которые возвращаются из источника данных, например.

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

Я делаю дополнительный материал с данными dataItem, и он должен быть правильным выбором.

Благодаря

РЕШИТЬ: Я думаю, что я, возможно, чрезмерно усложнять вещи. Ответ довольно прост и размещен ниже.

Answer 1

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 2

Может быть, вы можете сделать свою собственную проверку с помощью blur события:

$("#station").blur(function() { 
    var data = stationData, 
     nbData = data.length, 
     found = false; 

    for(var iData = 0; iData < nbData; iData++) { 
     if(this.value === data[iData].yourfieldname) // replace "yourfieldname" by the corresponding one if needed 
      found = true; 
    } 
    console.log(found); 
}); 

Вы можете проверить this fiddle.

Answer 3

Вам, скорее всего, потребуется какая-то пользовательская логика, которая перехватывает каждый ход ключа после того, как минимальная длина двух символов будет превзойдена, и не позволяйте опции вводить символ, который делает строку пользователя не соответствующей любым товарам из список автозаполнения.

Для этого перехватите событие изменения автозаполнения Kendo и сравните текущее значение ввода пользователя с элементами из отфильтрованного списка.

Answer 4

Надеется, что это помогает,

$("#autocomplete_id").val(""); 

$("#autocomplete").kendoAutoComplete({ 
    dataSource: datasource, 
    minLength: 1, 
    dataTextField: "catname", 
    dataValueField:"id", 
    select: function(e) {     
     var dataItem = this.dataItem(e.item.index());     
     $("#autocomplete_id").val(dataItem.id); 
    }, 
    dataBound: function(e){ 
     $("#autocomplete_id").val(""); 
    } 
}); 

FYI, autocomplete_id скрытого поле для хранения значения автозаполнения. - Иногда мы хотели бы иметь dataValueField, отличный от dataTextField. Таким образом, он служит своей цели.

В этом вы можете получить значение автозаполнения «id» из элемента autocomplete_id, который является dataValueField с сервера.

В привязке данных значения его значения равны нулю, а по выбору ему присваивается значение «id».

Answer 5

Этот метод позволяет пользователям вводить все, что им нравится, в автозаполнение, если список не открывается. Есть два исправления, чтобы исправить это:

1. инициализации переменной действует как ложь:

   вар действует = ложь;

2. Проверьте, не действует отбор в случае изменения, но не близко:

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

Answer 6

Хотя accepted answer работ, это не самое лучшее решение.

Предоставленное решение не учитывает, вводит ли пользователь значение, даже если виджет «Автозаполнение» кендо запускает событие open. В результате введенное значение не принудительно, и поэтому запись/выбор недействительны.

Мой подход предполагает, что приложение работает в MVC и массив передается в ViewData. Но это можно изменить в соответствии с вашей средой.

Мой подход:

var validSelect, isSelected; 
$("#staton").kendoAutoComplete({ 
    minLength: 2, 
    filter: "startswith", 
    dataTextField: "name", 
    filtering: function(e) { 
     validSelect = false; 
     dataArr = @Html.Raw(Json.Encode(ViewData["allStatons"])); 
     // for loop within the ViewData array to find for matching ID 
     for (var i = 0; i < dataArr .length; i++){ 
      if (dataArr[i].ID.toString().match("^" + $("#staton").val())) { 
       validSelect = true; 
       break; 
      } 
     } 

     // if value entered was not found in array - clear input 
     if (!validSelect) $("#staton").val(""); 
    }, 
    select: function(e){ 
     isSelected = true; 
    }, 
    close: function(e){ 
     // if selection is invalid or not selected from the list - clear input 
     if (!validSelect || !isSelected) $("#staton").val(""); 
    }, 
    dataSource: datasource 
}); 

Как вы можете видеть, этот подход требует массив со стороны сервера на нагрузке, так что он может соответствовать во время фильтрации события виджета.

Answer 7

Ответ на сообщение OP, в дополнение к ответу, предложенному @ Rock'n'muse, безусловно, является хорошим предложением, но оба не имеют важного и желаемого функционального аспекта.

При использовании раствора, данное @Mat и реализации change -vice- close предложение от @ Rock'n'muse, набранное в значение действительно очищает от виджета, если выбор не сделан из фильтруемого источника данных. Отлично; однако, если пользователь вводит что-то действительное и выбирает значение из отфильтрованного списка, затем помещает курсор в конец значения и набирает что-то, что сейчас делает недействительным значение (не возвращает никаких действительных выборов из источник данных), введенное значение не удаляется из виджета.

Что происходит, то значение isValid остается true, если ранее введенное (и действительное) значение должно быть изменено. Решением этого является установка isValid на false, как только будет инициировано событие фильтрации. Когда пользователь изменяет введенное значение, виджет пытается отфильтровать источник данных в поисках введенного значения. Установка isValid на false, как только запускается событие filter, обеспечивает «чистый сланец» для события change, как это было предложено решением от @ Rock'n'muse.

Поскольку мы устанавливаем isValid ложь, как только filtering событие срабатывает, мы не должны делать это в open случае (как источника данных фильтрации должно произойти до того, как пользователь никогда не увидит возможность выбора) , Из-за этого связь @была удалена из решения @ Mat. Это также означает, что первоначальное присвоение false по объявлению isValid является излишним, но присвоение переменной при объявлении всегда является хорошей идеей.

Ниже раствор из @Mat вместе с предложениями от @ Rock'n'muse и с filtering реализации применяются:

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 
}); 

В качестве приложения, с использованием привязки установить и оценить на select событие простое логическое значение, поскольку @Mat предлагает много чище, проще и быстрее, чем использование jQuery $.each(...) на источнике данных, чтобы убедиться, что введенное значение соответствует фактическому элементу источника данных в событии change. Это была моя первая мысль при работе над решением, прежде чем я нашел решение от @Mat (на этой странице), и такова моя аргументация за голосование за его решение и его вопрос.

Answer 8

Я нашел это на сайте Telerik, просто используя событие изменения. Для меня это лучше всего работает. Я добавил проверку «value ===». Это поймает, когда пользователь «очистит» выбор.

Here's the link to the full article.

 $("#countries").kendoAutoComplete({ 
     dataSource: data, 
     filter: "startswith", 
     placeholder: "Select country...", 
     change: function() { 
      var value = this.value(); 
      if (value === '') return; 
      var found = false; 
      var data = this.dataSource.view(); 

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

      if (!found) { 
      this.value(""); 
      alert("Custom values are not allowed"); 
      } 
     } 
     });