typeahead.js obtenir la valeur d'entrée cliquez sur le bouton
J'espère que je peux expliquer ce que j'essaie de faire...
Je suis en utilisant twitter typeahead.js pour afficher une liste de légumes. L'utilisateur commence à taper le nom d'un légume et peuvent ensuite sélectionner un légume de la liste qui, lorsqu'il est sélectionné, remplit l'entrée. Ensuite, l'utilisateur clique sur un bouton "ajouter un article". Lorsque ce bouton est cliqué, je tiens à ajouter de la valeur de l'entrée d'un div (la constitution d'une liste d'éléments).
Je vais avoir des problèmes comme le $('.typeahead').typeahead (val) méthode ne semble pas fonctionner du tout (erreur: undefined). en essayant $('.typeahead').val() retourne une chaîne vide.
Comment puis-je obtenir la valeur d'entrée lorsqu'un bouton est pressé?
//the url produce/get_produce_items returns an array of vegetables. The filter organises these into value (the vegetable name) and id (the id of the vegetable in the db)
var produce_items = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
prefetch: {
url: site_url('produce/get_produce_items'),
filter: function(list) {
return $.map(list, function(produce_item) { return { value: produce_item.name,id: produce_item.id }; });
},
ttl:10000
}
});
produce_items.initialize();
var typeaheadSettings = {
hint: true,
highlight: true,
minLength: 1,
};
var typeAheadDataset = {
name: 'produce_items',
displayKey: 'value',
valueKey: 'value',
source: produce_items.ttAdapter(),
};
$('#items_list .typeahead').typeahead(typeaheadSettings,typeAheadDataset);
//here's the button that is clicked, and when clicked should replace the typeahead with a div containing the typeahead value
$('#add_donation_item_line_btn').click(function() {
var item_count = $('input[name=item_count]');
var count = item_count.val();
var nextCount = parseInt(count) + 1;
//firm the line (swap the input out for a div)
var val = $('#items_list > div#don_line_'+count+' .typeahead').val();
firmLine(count,val);
$('#items_list .typeahead').trigger('added');
item_count.val(nextCount);
});
$('#items_list .typeahead').on('added',function(val){
$('#items_list .typeahead').typeahead(typeaheadSettings,typeAheadDataset);
});
$('#items_list .typeahead').on('typeahead:selected',function(evt, item){
$(this).parent('span').parent('div').find('input[type=hidden]').val(item.id);
});
function firmLine(count,val) {
var line = $('#items_list > div#don_line_'+count+' .typeahead');
line.typeahead('destroy');
line.replaceWith('<div class="span2 typeahead-replacement">'+val+'</div>');
}
Merci,
Dan
OriginalL'auteur september28 | 2014-03-26
Vous devez vous connecter pour publier un commentaire.
Cela a fonctionné pour moi:
OriginalL'auteur Muleskinner
Dan,
Peut-être vous pouvez faire usage de la
typeahead:selected
de l'événement et de stocker temporairement l'sélectionnés datum.Puis, quand vient le temps d'utiliser le système de référence (dans le div-entrée swap), vous pouvez appeler le magasin existant (
selectedDatum
). Vous devrez peut-être ajouter un peu de logique autour de compensation de ce magasin lorsque la valeur d'entrée est mise à jour, mais qui devrait être assez facile (à l'aide d'une combinaison detypeahead:opened
,keyup
, etc.Espère que cette aide.
OriginalL'auteur tbloncar
De ce que j'ai observerd
lorsque nous nous concentrons de l'inputBox sur lequel typeahead est appliqué puis $('.typeahead').typeahead (val).
Mais si le cas l'accent est toujours dans la zone de saisie , permet de dire que l'on est en train de faire quelque chose onchange ou oninput , puis d'obtenir la valeur dans la zone de saisie, nous allons avoir besoin
$('.typeahead').val();
OriginalL'auteur varunjain