jQuery UI Autocomplete – le menu disparaît en survol

J’essaie d’utiliser la saisie semi-automatique de l’interface utilisateur jQuery pour afficher une liste de noms de personnes dans une firebase database MySQL. La fonction de base fonctionne – lorsque vous tapez deux lettres ou plus, une liste de noms possibles s’affiche – mais lorsque je survole la liste ou que vous appuyez sur la touche bas pour accéder à la liste, elle disparaît (2 captures d’écran explique ça).

Cela signifie que la saisie semi-automatique devient inutile car je ne peux pas réellement accéder à la liste! Si quelqu’un peut aider, je serais très reconnaissant! Les captures d’écran et le code sont publiés ci-dessous.

Tapez les premiers caractères et le menu apparaît

Screenshot 1

Mais passez la souris ou appuyez sur la touche «bas» et celle-ci disparaît avant qu’une sélection puisse être faite

Screenshot 2

HTML:

Choose Account to Edit

jQuery:

 $(document).ready(function(){ $("#editname").autocomplete({ source: "names.php", minLength: 2, }); }); 

PHP:

 real_escape_ssortingng($_GET['term']); $query = "SELECT name FROM users WHERE name LIKE '%$text%' ORDER BY name ASC"; $result = $mysqli->query($query); $json = '['; $first = true; while($row = $result->fetch_assoc()) { if (!$first) { $json .= ','; } else { $first = false; } $json .= '{"value":"'.$row['name'].'"}'; } $json .= ']'; echo $json; ?> 

L’erreur est due à un conflit qui se produit lorsque deux fichiers d’interface utilisateur jQuery sont chargés dans le navigateur du client en même temps. Si vous atteignez votre section , vous verrez probablement que vous avez deux fichiers d’ interface jQuery différents référencés ici. Enlevez-en un et cela fonctionnera.

J’ai eu le même problème, mais je n’ai eu qu’une seule balise de script jquery-ui dans le DOM à la fois. Je chargeais du contenu avec Ajax qui incluait la balise script. Si je le faisais deux fois sur une page, cela briserait la liste déroulante de saisie semi-automatique, même si le contenu de la deuxième demande remplaçait le contenu du premier. Une solution consiste à append cette ligne avant de rendre le contenu contenant le script jquery-ui:

$.ui = null;

Cette erreur est provoquée lorsque deux fichiers d’interface utilisateur jQuery sont chargés dans votre navigateur en même temps. Cela peut provoquer un conflit de jquery. Supprimez le fichier d’interface utilisateur jquery inutilisé pour résoudre l’erreur.

Dans mon cas, le fichier jquery-ui.min.js était involontairement inclus dans le dossier assets. Pour le supprimer, j’ai ajouté un code dans les composants de config / main.php.

  'clientScript' => array( 'scriptMap' => array( 'jquery-ui.min.js' => false, )), 

Le fichier jquery qui est chargé dans votre en-tête contient tous les éléments de l’interface utilisateur, et celui qui est automatiquement ajouté à votre fichier, contient l’élément children qui n’a pas besoin d’être téléchargé. Vous devez donc le supprimer.

J’ai eu le même problème et je n’ai pas utilisé deux fois l’interface utilisateur jquery, mon interface jquery faisait partie de jquery DataTable.
Mon problème a été résolu avec le code suivant
Remarque: avec ce code, nous devons écrire du code pour fermer l’UL lorsque nous ne cliquons pas sur UL

 $(".gettingContactList").autocomplete({ source:this.contactList, /*following focus function was written because when mouse was being hovered over the menu, the menu was disappearing*/ focus:function(e,ui) { $(e.toElement).parents().show() } })