web-dev-qa-db-fra.com

jQuery UI Autocomplete - le menu disparaît au survol

J'essaie d'utiliser jQuery UI Autocomplete pour afficher une liste de noms de personnes dans une base de données MySQL. La fonction de base fonctionne - lorsque vous tapez deux lettres ou plus, une liste de noms possibles s'affiche - mais lorsque je passe la souris sur la liste ou appuie sur la touche Bas pour accéder à la liste, elle disparaît (2 captures d'écran ci-dessous peuvent aider à 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 affiché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 elle disparaîtra avant qu'une sélection puisse être faite

Screenshot 2

HTML:

  <div id="chooseaccount">
  Choose Account to Edit
  <div id="iechooseaccountlabel" class="labeldiv">
    <!--[if IE]>
     Enter Student Name
    <![endif]-->
   </div>

  <input type="text" class="inputs" id="editname" placeholder="Enter Student Name" />

  </div>

jQuery:

$(document).ready(function(){

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

});

PHP:

<?php  

$mysqli = new mysqli('********', '********', '**********', '*********');
$text = $mysqli->real_escape_string($_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;

?>
jqueryhtmljquery-uijquery-ui-autocomplete
60
Chris

L'erreur est due à un conflit qui se produit lorsque deux jQuery UI fichiers sont chargés dans le navigateur du client en même temps. Si vous pointez dans votre <head> section, vous verrez probablement que vous avez deux jQuery UI différents fichiers référencés ici. Retirez-en un et cela fonctionnera.

198
bicycle

Cette erreur se produit lorsque deux fichiers jQuery UI sont chargés dans votre navigateur en même temps, ce qui peut entraîner un conflit jquery. Supprimez le fichier jquery UI inutilisé pour résoudre l'erreur.

Dans mon cas, le fichier jquery-ui.min.js a été involontairement inclus dans le dossier des actifs.Pour le supprimer, j'ai ajouté un code dans les composants dans config/main.php

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

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

$.ui = null;

4
regularmike

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é dans votre fichier, a l'élément enfants qui n'a pas besoin d'être téléchargé, vous devez donc le supprimer.

1
user5642741

J'ai eu le même problème et je n'ai pas utilisé l'interface jquery deux fois, 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 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()
    }
})
1
Akshay Vijay Jain

J'ai eu un problème similaire avec Typeahead

J'ai utilisé focus () et le problème a été résolu.

Exemple:

$(ele).typeahead({source: $scope.varMap['abc'], items: undefined});
$(ele).focus();
0
Mohit Kanojia