2011-06-01 5 views
9

J'utilise jquery autocomplete combobox et tout va bien. Mais je veux également définir une valeur spécifique par le biais de JavaScript comme $("#value").val("somevalue") et le définir pour sélectionner l'élément, mais pas de changements dans l'élément d'entrée avec saisie semi-automatique.définir la valeur de jquery autocomplete combobox

Bien sûr, je peux sélectionner cette entrée et définir directement la valeur, mais est-ce d'autres façons de le faire? J'essaie de lier set à this.element comme this.element.bind("change", function(){alert(1)}) mais il n'y avait pas d'effets. Et je ne sais pas pourquoi.

Modifier

J'ai trouvé une solution pour ce cas. Mais je ne l'aime pas. J'ai ajouté le code suivant à _create fonction pour ui.combobox

this.element.bind("change", function() { 
    input.val($(select).find("option:selected").text()); 
}); 

Et quand je dois changer la valeur que je peux utiliser $("#selector").val("specificvalue").trigger("change");

+0

nous montrent un peu de votre html .. –

+1

quel type html? il ressemble à xandox

Répondre

25

Est-ce que this demo est this demo?

Le lien définit la valeur de la saisie semi-automatique de l'interface utilisateur jQuery sur Java. La mise au point est laissée sur l'entrée afin que les événements clavier normaux puissent être utilisés pour naviguer dans les options.

Edit: Que diriez-vous d'ajouter une autre fonction à la combobox comme ceci:

autocomplete : function(value) { 
    this.element.val(value); 
    this.input.val(value); 
} 

et de l'appeler avec la valeur que vous souhaitez définir:

$('#combobox').combobox('autocomplete', 'Java'); 

Updated demo

I Je ne trouve aucune fonction existante disponible pour faire ce que vous voulez, mais cela semble bien fonctionner pour moi. J'espère que c'est plus proche du comportement que vous exigez.

+0

Oui. C'est un bon comportement mais pas complet. Vous ne devriez pas oublier d'appeler $ ("# combobox"). Val ("Java"). Regardez mon edit pour la question. J'ai trouvé une solution de contournement. Mais je ne devrais pas oublier la fonction de déclenchement d'appel, et c'est inconfortable. – xandox

+1

OK, je pense que je comprends. Vous recherchez une solution discrète. J'ai ajouté une nouvelle démo qui pourrait être meilleure. – andyb

+0

yeh. C'est ce que j'ai cherché. Merci beaucoup méfiez-vous. – xandox

-1

http://jsfiddle.net/nhJDd/

$(".document").ready(function(){ 
    $("select option:eq(1)").val("someNewVal"); 
    $("select option:eq(1)").text("Another Val"); 
    $("select option:eq(1)").attr('selected', 'selected'); 

}); 

est ici un exemple de travail et jquery, je suppose que vous voulez changer la valeur d'un select, changer sa face de texte et l'avoir également sélectionné au chargement de la page?

#

Tentative 2:

ici est un autre violon: http://jsfiddle.net/HafLW/1/, vous voulez-vous dire que sélectionner une option, vous voulez ajouter cette valeur à la saisie semi-automatique d'une zone d'entrée?

$(".document").ready(function(){ 
    someString = "this,that"; 
     $("input").autocomplete({source: someString.split(",")}); 

    $("select").change(function(){ 
     alert($(this).val()+" appended"); 
someString = someString+","+$(this).val(); 
     $("input").autocomplete({source: someString.split(",")}); 


    }); 
}); 
+0

:) actuellement non. je veux suivre. si i cal $ ("# select"). val ("somevalue") ("somevalue" existe déjà dans les options select), input (élément ajouté avec autocomplete) le texte change aussi – xandox

+0

ah ok donc c'est un peu plus clair :) – John

+0

:) ** user763228 ** regarde la réponse par ** andyb ** Il fait presque la bonne chose. – xandox

4

J'ai géré un moyen rapide et sale de définir la valeur. Mais, vous devez connaître à la fois la valeur et le texte de l'élément que vous souhaitez afficher dans la liste déroulante.

var myValue = foo; // value that you want selected 
var myText = bar; // text that you want to display 
// You first need to set the value of the (hidden) select list 
$('#myCombo').val(myValue); 
// ...then you need to set the display text of the actual autocomplete box. 
$('#myCombo').siblings('.ui-combobox').find('.ui-autocomplete-input').val(myText); 
1

Je aime vraiment ce que andyb a fait, mais je en avais besoin de faire la manipulation d'un peu plus autour de l'événement pour être en mesure de gérer le déclenchement de l'événement de changement parce que « sélectionné » ne gère pas en frappant entrer ou perdre le focus sur l'entrée (frappe l'onglet ou clic de souris).

En tant que tel, en utilisant ce andyb a fait comme base, ainsi que la dernière version du script Autocomplete jQuery, j'ai créé la solution suivante: DEMO

  • Entrée: Choisit le premier élément si menu est visible
  • perdu le focus: correspondance partielle déclenche pas trouvé message et efface l'entrée (jQuery UI), mais réponse complètement typé "sélectionne" cette valeur (pas de cas sensative)

Comment la méthode du changement peut être utlized:

$("#combobox").combobox({ 
    selected: function (event, ui) { 
     $("#output").text("Selected Event >>> " + $("#combobox").val()); 
    } 
}) 
.change(function (e) { 
    $("#output").text("Change Event >>> " + $("#combobox").val()); 
}); 

Espérons que cela aide les autres qui ont besoin d'une fonctionnalité d'événement de modification supplémentaire pour compenser les lacunes « sélectionné » laisse ouverte.

3

@andyb, Je pense rewrite:

autocomplete: function (value) { 
     this.element.val(value); 

     var selected = this.element.children(":selected"), 
       value = selected.val() ? selected.text() : ""; 
     this.input.val(value); 
    } 
+0

Ce serait une meilleure réponse si vous avez expliqué votre code. –

+1

var selected = this.element.children (": selected"); value = selected.val()? selected.text(): ""; // il obtiendra la valeur texte de l'option qui est sélectionnée pour la valeur d'entrée au lieu de la valeur de l'option – nthaih

Questions connexes