ejemplo - jQuery UI Autocompletar: el menú desaparece al desplazarse
jquery ui autocomplete (5)
Estoy tratando de utilizar jQuery UI Autocompletar para mostrar una lista de nombres de personas en una base de datos MySQL. La función básica está funcionando: cuando escribe dos o más letras se muestra una lista de nombres posibles, pero cuando deslizo el mouse sobre la lista o presiono la tecla hacia abajo para acceder a la lista, desaparece (2 capturas de pantalla a continuación pueden ayudar a explica esto).
Lo que esto significa es que el Autocompletar no tiene sentido ya que no puedo acceder a la lista. ¡Si alguien puede ayudar, estaría muy agradecido! Las capturas de pantalla y el código se publican a continuación.
Escriba los primeros caracteres y aparecerá el menú
Pero desplace el mouse o presione la tecla "hacia abajo" y desaparecerá antes de que se pueda realizar una selección
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;
?>
El archivo jquery que está cargado en su encabezado contiene todo el elemento de la interfaz de usuario, y el que se agrega automáticamente en su archivo, tiene el elemento secundario que no necesita cargarse, por lo que debe eliminarlo.
El error se debe a un conflicto que ocurre cuando dos archivos jQuery UI se cargan en el navegador del cliente al mismo tiempo. Si alcanza su pico en la sección <head> , probablemente verá que tiene dos archivos jQuery UI diferentes a los que se hace referencia allí. Solo elimina uno y funcionará.
Este error se produce cuando dos archivos jQuery UI se cargan en su navegador al mismo tiempo. Esto puede causar un conflicto de jquery. Elimine el archivo de UQ jquery no utilizado para resolver el error.
En mi caso, el archivo jquery-ui.min.js se incluyó involuntariamente en la carpeta assets. Para eliminarlo agregué un código en los componentes en config / main.php
''clientScript'' => array(
''scriptMap'' => array(
''jquery-ui.min.js'' => false,
)),
Tuve el mismo problema y no usé la interfaz de usuario de jquery dos veces, mi interfaz de usuario de jquery era parte de jquery DataTable.
Mi problema fue resuelto con el siguiente código
Nota: con este código debemos escribir el código para cerrar el UL cuando no hagamos clic en 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()
}
})
Tuve el mismo problema, pero solo tuve una etiqueta de script jquery-ui en el DOM a la vez. Estaba cargando contenido con Ajax que incluía la etiqueta del script. Si lo hiciera dos veces en una página, rompería el menú desplegable Autocompletar, aunque el contenido de la segunda solicitud reemplazara el contenido de la primera. Una solución consiste en agregar esta línea antes de representar el contenido que contiene el script jquery-ui:
$.ui = null;