jQuery UI autocomplete sélectionnez l'événement à ne pas travailler avec un clic de souris

J'ai une liste de liens, et j'ai cette boîte de recherche #reportname. Lorsque l'utilisateur tape dans la zone de recherche, la saisie semi-automatique affichera le texte des liens dans une liste.

<div class="inline">
<div class="span-10">
<label for="reportname">Report Name</label>
<input type="text" name="reportname" id="reportname" />
</div>
<div class="span-10 last">
<button type="button" id="reportfind">Select</button>
</div>
</div>

L'utilisateur peut alors utiliser les touches de direction du clavier pour sélectionner l'un des textes, et quand il a appuyez sur ENTRÉE, le navigateur, allez à l'adresse du lien. So far So good.

<script type="text/javascript">
    $(document).ready(function () {
        $("#reportname").autocomplete({
            source: $.map($("a.large"), function (a) { return a.text }),
            select: function () { $("#reportfind").click() }
        })
        $("#reportfind").click(function () {
            var reportname = $("#reportname")[0].value
            var thelinks = $('a.large:contains("' + reportname + '")').filter(
                function (i) { return (this.text === reportname) })
            window.location = thelinks[0].href
        })
    });
</script>

Le problème, c'est quand les types d'utilisateur, la saisie semi-automatique montre une liste, et ensuite à l'utilisateur d'utiliser la souris pour cliquer sur l'un des résultat. La navigation au clavier, le contenu de la zone de recherche est modifié, mais si l'utilisateur clique sur une des options, la boîte de recherche n'est pas modifié et l'événement select est immédiatement déclenchée.

Comment puis-je faire le script fonctionne avec le clavier de sélection et de sélection à la souris? Comment puis-je différencier sélectionner les événements qui sont déclenchés par le clavier avec celles déclenchées par la souris?

InformationsquelleAutor Endy Tjahjono | 2011-09-06

jquery-ui

19

À votre 2ème question: "Comment puis-je différencier sélectionner les événements qui sont déclenchés par le clavier avec celles déclenchées par des souris?"

La event objet dans l'INTERFACE utilisateur de jQuery événements incluent un .originalEvent, l'origine de l'événement l'enveloppa. Il pourrait avoir été enroulé plusieurs fois, si, comme dans le cas de la saisie semi-automatique widget. Donc, vous avez besoin de tracer la hauteur de l'arbre pour obtenir l'original de l'objet d'événement, vous pouvez vérifier le type de l'événement:
```
$("#reportname").autocomplete({
    select: function(event, ui) {
        var origEvent = event;
        while (origEvent.originalEvent !== undefined)
            origEvent = origEvent.originalEvent;
        if (origEvent.type == 'keydown')
            $("#reportfind").click();
    },
    ...
});
```
- Merci! Votre réponse m'a amené à vérifier les paramètres d'événement, en particulier "l'interface utilisateur". Il s'est avéré que je peux utiliser ui.item.value pour obtenir l'élément sélectionné!
- C'est en effet une meilleure solution que vous avez trouvé. Bien fait! 🙂
InformationsquelleAutor William Niu
17

Grâce à @William Niu et firebug, j'ai trouvé que l'événement select paramètre 'ui' contient la valeur sélectionnée: ui.item.value. Donc, au lieu de dépendre de jquery UI pour modifier le texte de la zone de texte, qui ne s'est pas produit si l'utilisateur clique avec la souris, je viens de ramasser la valeur sélectionnée de 'ui':
```
$("#reportname").autocomplete({
    select: function (event, ui) {
        var reportname = ui.item.value
        var thelinks = $('a.large:contains("' + reportname + '")').filter(
            function (i) { return (this.text === reportname) })
        window.location = thelinks[0].href
    };
})
```
- Pour les lecteurs de cette question: le test de la réponse de William Niu, est vraiment génial et puissant.
InformationsquelleAutor Endy Tjahjono
3

Je l'ai testé dans toutes les version de IE (y compris 9) et finit avec une entrée vide-contrôle après j'ai sélectionné l'élément à l'aide de la souris. Cela a causé quelques maux de tête. Je suis même allé vers le bas sur le code source de jQuery UI pour voir ce qui s'y passe, mais n'a pas trouvé d'indices soit.

Nous pouvons le faire par la fixation d'un délai, qui, en interne, les files d'attente d'un événement dans le javascript-moteur de IE. Parce que c'est garanti, que ce délai d'attente-l'événement sera mis en file d'attente après les événements de focus (ce qui a déjà été déclenchée avant par IE lui-même).
```
select: function (event, ui) {
    var label = ui.item.label;
    var value = ui.item.value;
    $this = $(this);
    setTimeout(function () {
        $('#txtBoxRole').val(value);
    }, 1);
},
```
InformationsquelleAutor Manish Kundu
2

Eu le même problème.

Jquery: 1.11.1
INTERFACE utilisateur: 1.11.0

Question: utilisez-vous bassistance jquery validte plugin simultanément?

Si positif: mise à jour d'une nouvelle version ou tout simplement le désactiver pour les tests.

J'ai mis à jour à partir de 1.5.5 à 1.13.0

Aidé pour moi. Bonne chance!

InformationsquelleAutor denesis
1

Récemment, j'ai rencontré exactement le même problème (saisie semi-automatique d'éléments à ne pas cliquables, les événements de clavier de travail).

S'est avéré que dans mon cas, la réponse n'était pas du tout en JS liés. La saisie semi-automatique de l'INTERFACE utilisateur n'était pas cliquable tout simplement parce qu'il manquait une valeur appropriée pour le z-index en CSS la propriété.
```
.ui-autocomplete {
    z-index: 99999; /* adjust this value */
}
```
Qui a fait le tour.
- Cela a fonctionné pour moi de mettre l'élément cliqué dans la zone de texte. Je n'ai pas nécessité de faire la distinction entre les événements qui sont déclenchés par le clavier par rapport à la souris.
- N'a pas fonctionné pour moi.
InformationsquelleAutor SebastianH
0

Cela peut être un peu farshot, mais j'ai eu une situation similaire, où la sélection d'une saisie semi-automatique de la valeur à gauche du champ de saisie vide. La réponse a été d'ignorer le "changement" des événements (comme ceux qui ont été manipulés par défaut) et de les remplacer par se lie à "autocompletechange" des événements.
Le "changement" de l'événement est déclenché avant que la valeur de la saisie semi-automatique est dans le domaine => le champ a "vide" de la valeur lors de la manipulation de la normale événement "change".
```
//ignore the "change" event for the field
var item = $("#"+id); //JQuery for getting the element
item.bind("autocompletechange", function(event, ui) { [call your handler function here] }
```
InformationsquelleAutor Ville Myrskyneva
0

J'ai été confronté à un problème similaire. Je voulais envoyer le formulaire lorsque l'utilisateur clique sur une option. Mais la forme obtenu soumis avant même la valeur de l'entrée peut être définie. Donc sur le serveur du contrôleur obtenu une valeur null.

Je l'ai résolu en utilisant une version modifiée de William Niu de la réponse.

Vérifier ce post - https://stackoverflow.com/a/19781850/1565521

InformationsquelleAutor atsurti

J'ai eu le même problème, un clic de souris n'a pas été en sélectionnant l'élément qui a été cliqué.Mon code était censé faire un appel ajax pour récupérer les données que par la sélection de l'élément de saisie semi-automatique de la source.

Code précédent: clic de la souris ne fonctionne pas.

 select: function(event, ui) {
          event.preventDefault();
          for(i= 0; i< customer.length; i++)
          if(document.getElementById('inputBox').value == customer[i].name)
          {

          $.ajax({
          call
          })

Code modifié :cliquez sur la souris de travail

select: function(event, ui) {
          //event.preventDefault();
          for(i= 0; i< customer.length; i++)
          //if(document.getElementById('inputBox').value == customer[i].fields.name)
          if(ui.item.value == customer[i].name)
          {
          $.ajax({
          call
          })

InformationsquelleAutor allsyed

Vous devez vous connecter pour publier un commentaire.