Comment créer une auto-remplir la zone de liste déroulante?

Ici est un jQuery UI Autocomplete de liaison que j'ai écrit. Il a pour but de refléter la options, optionsText, optionsValue, value liaison paradigme utilisé avec sélectionner les éléments d'un couple d'ajouts (vous pouvez faire une requête pour les options via AJAX et vous pouvez différencier ce qui est affiché dans la zone d'entrée contre ce qui est affiché dans la boîte de sélection apparaît.

Vous n'avez pas besoin de fournir toutes les options. Il va choisir les paramètres par défaut pour vous.

Ici est un sample sans la fonctionnalité AJAX: http://jsfiddle.net/rniemeyer/YNCTY/

Voici le même exemple avec un bouton qui lui permet de se comporter plus comme une zone de liste modifiable: http://jsfiddle.net/rniemeyer/PPsRC/

Voici un exemple avec les options récupérées via AJAX: http://jsfiddle.net/rniemeyer/MJQ6g/

//jqAuto -- main binding (should contain additional options to pass to autocomplete)
//jqAutoSource -- the array to populate with choices (needs to be an observableArray)
//jqAutoQuery -- function to return choices (if you need to return via AJAX)
//jqAutoValue -- where to write the selected value
//jqAutoSourceLabel -- the property that should be displayed in the possible choices
//jqAutoSourceInputValue -- the property that should be displayed in the input box
//jqAutoSourceValue -- the property to use for the value
ko.bindingHandlers.jqAuto = {
init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
var options = valueAccessor() || {},
allBindings = allBindingsAccessor(),
unwrap = ko.utils.unwrapObservable,
modelValue = allBindings.jqAutoValue,
source = allBindings.jqAutoSource,
query = allBindings.jqAutoQuery,
valueProp = allBindings.jqAutoSourceValue,
inputValueProp = allBindings.jqAutoSourceInputValue || valueProp,
labelProp = allBindings.jqAutoSourceLabel || inputValueProp;
//function that is shared by both select and change event handlers
function writeValueToModel(valueToWrite) {
if (ko.isWriteableObservable(modelValue)) {
modelValue(valueToWrite );  
} else {  //write to non-observable
if (allBindings['_ko_property_writers'] && allBindings['_ko_property_writers']['jqAutoValue'])
allBindings['_ko_property_writers']['jqAutoValue'](valueToWrite );    
}
}
//on a selection write the proper value to the model
options.select = function(event, ui) {
writeValueToModel(ui.item ? ui.item.actualValue : null);
};
//on a change, make sure that it is a valid value or clear out the model value
options.change = function(event, ui) {
var currentValue = $(element).val();
var matchingItem =  ko.utils.arrayFirst(unwrap(source), function(item) {
return unwrap(item[inputValueProp]) === currentValue;  
});
if (!matchingItem) {
writeValueToModel(null);
}    
}
//hold the autocomplete current response
var currentResponse = null;
//handle the choices being updated in a DO, to decouple value updates from source (options) updates
var mappedSource = ko.dependentObservable({
read: function() {
mapped = ko.utils.arrayMap(unwrap(source), function(item) {
var result = {};
result.label = labelProp ? unwrap(item[labelProp]) : unwrap(item).toString();  //show in pop-up choices
result.value = inputValueProp ? unwrap(item[inputValueProp]) : unwrap(item).toString();  //show in input box
result.actualValue = valueProp ? unwrap(item[valueProp]) : item;  //store in model
return result;
});
return mapped;                
},
write: function(newValue) {
source(newValue);  //update the source observableArray, so our mapped value (above) is correct
if (currentResponse) {
currentResponse(mappedSource());
}
}
});
if (query) {
options.source = function(request, response) {  
currentResponse = response;
query.call(this, request.term, mappedSource);
}
} else {
//whenever the items that make up the source are updated, make sure that autocomplete knows it
mappedSource.subscribe(function(newValue) {
$(element).autocomplete("option", "source", newValue); 
});
options.source = mappedSource();
}
ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
$(element).autocomplete("destroy");
});
//initialize autocomplete
$(element).autocomplete(options);
},
update: function(element, valueAccessor, allBindingsAccessor, viewModel) {
//update value based on a model change
var allBindings = allBindingsAccessor(),
unwrap = ko.utils.unwrapObservable,
modelValue = unwrap(allBindings.jqAutoValue) || '', 
valueProp = allBindings.jqAutoSourceValue,
inputValueProp = allBindings.jqAutoSourceInputValue || valueProp;
//if we are writing a different property to the input than we are writing to the model, then locate the object
if (valueProp && inputValueProp !== valueProp) {
var source = unwrap(allBindings.jqAutoSource) || [];
var modelValue = ko.utils.arrayFirst(source, function(item) {
return unwrap(item[valueProp]) === modelValue;
}) || {};             
} 
//update the element with the value that should be shown in the input
$(element).val(modelValue && inputValueProp !== valueProp ? unwrap(modelValue[inputValueProp]) : modelValue.toString());    
}
};

Que vous pouvez l'utiliser comme:

<input data-bind="jqAuto: { autoFocus: true }, jqAutoSource: myPeople, jqAutoValue: mySelectedGuid, jqAutoSourceLabel: 'displayName', jqAutoSourceInputValue: 'name', jqAutoSourceValue: 'guid'" />

Mise à JOUR: je suis maintenant une version de cette liaison, ici: https://github.com/rniemeyer/knockout-jqAutocomplete

L'élimination de besoin....

Ces deux solutions sont grandes (avec Niemeyer est beaucoup plus fine), mais ils ont tous les deux oublier l'élimination de la manipulation!

Ils doivent gérer les cessions en détruisant jquery autocomplete (prévenir les fuites de mémoire) avec ceci:

init: function (element, valueAccessor, allBindingsAccessor) {  
....  
//handle disposal (if KO removes by the template binding)
ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
$(element).autocomplete("destroy");
});
}

J'ai essayé Niemeyer solution avec JQuery UI 1.10.x, mais la zone de saisie semi-automatique n'a tout simplement pas se montrer, après quelques recherches, j'ai trouvé une solution de contournement simple ici. Ajouter la règle suivante à la fin de votre jquery-ui.fichier css résout le problème:

ul.ui-autocomplete.ui-menu {
z-index: 1000;
}

J'ai aussi utilisé de knock-out de 3.1.0, donc j'ai dû remplacer ko.dependentObservable(...) avec un ko.calculée(...)

En outre, si votre KO Vue modèle contient une valeur numérique assurez-vous de modifier les opérateurs de comparaison: de === de == et !== pour != , de sorte que le type de conversion est effectuée.

J'espère que cela aide les autres

Niemeyer solution est grand, cependant je rencontre un problème lorsque vous essayez d'utiliser la saisie semi-automatique à l'intérieur d'un modal. La saisie semi-automatique a été détruit modaux événement close (Erreur non Interceptée: impossible d'appeler des méthodes sur la saisie semi-automatique avant l'initialisation; tenté d'appeler la méthode 'option' ) j'ai corrigé par l'ajout de deux lignes à la liaison de la méthode subscribe:

mappedSource.subscribe(function (newValue) {
if (!$(element).hasClass('ui-autocomplete-input'))
$(element).autocomplete(options);
$(element).autocomplete("option", "source", newValue);
});

Une autre variation sur Epstone de la solution originale.

J'ai essayé de l'utiliser mais également constaté que le modèle de vue a été seulement d'être mis à jour lorsqu'une valeur a été saisi manuellement. La sélection d'une saisie semi-automatique de l'entrée à gauche le modèle de vue avec l'ancienne valeur, ce qui est un peu inquiétant parce que la validation passe - c'est seulement quand vous vous regardez dans la base de données que vous voyez le problème!

La méthode que j'ai utilisé est de connecter l'sélectionnez gestionnaire de jquery composant de l'INTERFACE utilisateur dans le knock-out de liaison de l'init, qui met simplement à jour le knock-out modèle lorsqu'une valeur est choisie. Ce code intègre également les disposer de plomberie de George utiles réponse ci-dessus.

JS:

init: function (element, valueAccessor, allBindingsAccessor) {
valueAccessor.select = function(event, ui) {
var va = allBindingsAccessor();
va.value(ui.item.value);
}
$(element).autocomplete(valueAccessor);
//handle disposal (if KO removes by the template binding)
ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
$(element).autocomplete("destroy");
});
}
...

HTML:

                    <input class="form-control" type="text" data-bind="value: ModelProperty, ko_autocomplete: { source: $root.getAutocompleteValues() }" />

C'est maintenant le travail assez bien. Il est prévu pour fonctionner à l'encontre d'un préchargé tableau de valeurs sur la page plutôt que d'interroger une api.