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 la flèche du clavier pour sélectionner l'un des textes, et quand il appuie sur Entrée, le navigateur va à 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 est lorsque l'utilisateur tape, autocomplete affiche une liste, puis l'utilisateur utilise la souris pour cliquer sur l'un des résultats. 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 faire fonctionner le script avec la sélection du clavier et de 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?
8 ответов
à votre 2e question: "Comment puis-je faire la différence entre les événements select qui sont déclenchés par le clavier et ceux déclenchés par la souris?"
event l'objet dans les événements UI jQuery inclurait un
grâce à @William Niu et firebug, j'ai trouvé que le paramètre select event 'ui' contient la valeur complète sélectionnée:ui.item.value. Donc au lieu de dépendre de jQuery UI pour changer le texte de la boîte de texte, ce qui n'est pas arrivé si l'utilisateur clique avec la souris, je prends juste 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
};
})
Je l'ai testé dans toutes les versions D'IE (inlcuding 9) et j'ai toujours fini avec un contrôle d'entrée vide après avoir sélectionné L'élément à l'aide de la souris. Cela a causé quelques maux de tête. Je suis même allé au code source de jQuery UI pour voir ce qui se passe là-bas, mais n'a pas trouvé d'indices non plus.
nous pouvons le faire en paramétrant un timeout, qui fait la file d'attente interne d'un événement dans le moteur javascript D'IE. Parce qu'il est garanti, que ce timeout-event sera mis en file d'attente après l'événement focus (ce a déjà été déclenché 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);
},
avait 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: mettez à jour cette version ou désactivez-la pour les tests.
j'ai mis à jour à partir de 1.5.5 à 1.13.0
a aidé pour moi. Bonne chance!
j'ai récemment rencontré le même problème (autocomplete items not clickable, keyboard events working).
.ui-autocomplete {
z-index: 99999; /* adjust this value */
}
ça a fait l'affaire.
cela peut être un peu tiré par les cheveux, mais j'ai eu une situation similaire où la sélection d'une valeur autocomplète a laissé le champ d'entrée vide. La réponse était d'ignorer les événements" change "(car ils étaient traités par défaut) et de les remplacer par des liens vers les événements" autocompletechange". L'événement " change "est déclenché avant que la valeur d'autocomplete soit dans le champ => le champ avait une valeur" empty "lors de la gestion de l'événement" change " normal.
// 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] }
je faisais face à 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 la réponse de William Niu.
Cochez cette après - https://stackoverflow.com/a/19781850/1565521
j'ai eu le même problème, clic de souris ne sélectionnait pas l'élément qui a été cliqué.Mon code était supposé faire un appel ajax pour récupérer les données selon l'élément de sélection de la source autocomplete.
Code précédent: clic de 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é: clic de souris
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
})
Autres questions sur