Kendo de saisie semi-automatique - utilisateurs de la force pour le rendre valide la sélection

Cette méthode permet aux utilisateurs de taper tout ce qu'ils aiment dans la saisie semi-automatique si la liste ne s'ouvre. Il y a deux corrections pour corriger ce problème:

1. initialiser la variable valide comme faux:

   var valide = false;

2. Vérifier si aucun certificat de sélection dans le changement de l'événement, mais pas dans proximité:

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

La réponse de l'OP posté, en plus de la réponse proposée par @rock'n''muse sont certainement de bonnes propositions, mais les deux miss, une importante et souhaitée de l'aspect fonctionnel.

Lors de l'utilisation de la solution donnée par @Mat et la mise en œuvre de la change-vice-close suggestion de @rock'n''muse, l'tapé en valeur en effet efface à partir du widget si aucune sélection n'est faite à partir des données filtrées source. Ce qui est excellent; toutefois, si l'utilisateur tape dans quelque chose de valable et sélectionne une valeur dans la liste filtrée, puis place le curseur à la fin de la valeur et la nature quelque chose qui maintenant invalide la valeur (ne renvoie aucun des sélections valides à partir de la source de données), l'tapé en valeur n'est pas effacé à partir du widget.

Ce qui se passe est que le isValid valeur reste true si la a déjà été tapé (et valide) la valeur doit être modifiée. La solution à cela est de définir isValid à false dès que le filtrage de l'événement est déclenché. Lorsque l'utilisateur modifie l'tapé en valeur, le widget tente de filtrer la source de données dans la recherche de l'tapé en valeur. Réglage isValid à false dès que le filter événement est déclenché assure une "table rase" pour le change événement comme l'a suggéré la solution de @rock'n''muse.

Parce que nous sommes réglage isValid à faux dès que l' filtering événement est déclenché, nous n'avons pas besoin de le faire dans le open de l'événement (en tant que source de données de filtrage doit se produire avant que l'utilisateur ne verra jamais une option pour la sélectionner). De ce fait, la open événement de liaison a été retiré de @Mat de la solution. Cela signifie également que l'affectation initiale de false sur déclaration de isValid est superflu, mais l'attribution de la variable lors de la déclaration est toujours une bonne idée.

Ci-dessous est la solution de @Mat avec les suggestions de @rock'n''muse et avec le filtering de mise en œuvre appliquées:

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

Comme un additif, à l'aide de la select événement de liaison de définir et d'évaluer une valeur booléenne simple comme @Mat propose est beaucoup plus propre, plus simple et plus rapide que d'utiliser jQuery $.each(...) sur la source de données afin de s'assurer de l'tapé en valeur correspond à un élément réel de la source de données dans la change événement. Ce fut ma première pensée à travailler à une solution avant que je trouve la solution de @Mat (cette page), et telle est mon raisonnement pour le vote de sa solution et de sa question.

Espère que cette aide,

$("#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("");
    }
}); 

Pour info, autocomplete_id est un champ caché pour stocker la valeur de la saisie semi-automatique. - Parfois, nous aimerions avoir la dataValueField autres que les propriétés de datatextfield. Donc, il sert son but.

Dans ce que vous pouvez obtenir la valeur de la saisie semi-automatique "id" de l'élément autocomplete_id - qui est dataValueField de serverside.

Dans databound, de ses valeurs est définie à null, et sur certains, il est affecté à la "id" de la valeur.

J'ai trouvé ceci sur Telerik du site en utilisant simplement l'événement de changement. Pour moi, ce qui fonctionne le mieux. J'ai ajouté de la valeur "= = = "" vérifier. Ce sera l'attraper lorsque l'utilisateur "efface" la sélection.

Voici le lien vers l'article complet.

      $("#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");
          }
        }
      });