jQuery UI autocompletar mal posicionamiento

usando jQuery UI 1.8 tratando de autocompletarjQuery UI autocompletar mal posicionamiento

Todo funciona, aparte de que la interfaz de usuario de menú no está colocado debajo de mi elemento de entrada, sino más bien en la esquina superior izquierda.

¿Alguien ha encontrado este problema?

Aquí es mi html:

<div id="search"> 
    <div id="searchFormWrapper"> 
     <form method="post" name="searchForm" id="searchForm" action="/searchresults"> 
     <label for="searchPhrase" id="searchFor"> 
      Search for</label> 
     <input name="searchPhrase" id="searchPhrase" type="text" /> 
     <label for="searchScope" id="searchIn"> 
      in</label> 
     <select name="searchScope" id="searchScope"> 
      <option value="">All Shops</option> 
      ... 
     </select> 
     <input type="image" name="submitSearch" id="submitSearch" src="/images/buttons/search.gif" 
      alt="Search ..." /> 
     </form> 
     <br class="clear" /> 
    </div> 
</div>

y aquí es mi css:

#search 
{ 
width:100%; 
margin:0; 
padding:0; 
text-align:center; 
height:36px; 
line-height:36px; 
background:#666 url(/images/interface/info_bar_bg.gif) repeat-x top left; 
overflow:hidden; 
font-size:12px; 
} 
#searchFormWrapper 
{ 
width:520px; 
height:36px; 
overflow:hidden; 
margin:auto; 
padding:0; 
} 
label#searchFor 
{ 
display:block; 
float:left; 
width:80px; 
padding:0 5px 0 0; 
margin:0 0 0 0; 
text-align:right; 
} 
label#searchIn 
{ 
display:block; 
float:left; 
width:20px; 
padding:0 5px 0 0; 
margin:0 0 0 0; 
text-align:right; 
} 
#searchPhrase 
{ 
display:block; 
float:left; 
width:120px; 
margin:7px 0 0 0; 
padding:0; 
} 
#searchScope 
{ 
display:block; 
float:left; 
width:120px; 
margin:7px 0 0 0; 
padding:0; 
} 
#submitSearch 
{ 
display:block; 
float:left; 
margin:7px 0 0 10px; 
padding:0; 
}

y aquí es mi javascript:

$(document).ready(function() 
{ 
    $("#searchPhrase").autocomplete(
    { 
     source: "/search?json", 
     minLength: 2 
    }); 
});

Fuente

2010-04-01 autonomatt

¿Estás seguro de que estás incluyendo los archivos CSS de jQuery UI? – Pointy

Sí. Comprobado eso. La lista del menú ui está formateada correctamente. Simplemente no se encuentra bien ... – autonomatt

¿Tiene un enlace a una versión para mirar? Sugeriría quitar todo el CSS que no sea el CSS para la autocompletar para comprobar que haya otras reglas en conflicto. – Alex

Woohoo. Encontrado el culpable:

<script type="text/javascript" src="/scripts/jquery/132/jquery-1.4.2.min.js"></script> 
      <script type="text/javascript" src="/scripts/jquery/132/jquery-ui-1.8.custom.min.js"></script> 
      <script type="text/javascript" src="/scripts/jquery/100325/jquery.dimensions.js"></script> 
      <script type="text/javascript" src="/scripts/jquery/100325/jquery.tooltip.js"></script>

No incluya jquery.dimensions.js. Supongo que ya está en jquery-ui.js ... de todos modos, solucionó mi problema.

Por último jQueryUI ahora tiene que incluir jquery.ui.position.js

Fuente

2010-04-06 14:40:22 autonomatt

Oh hombre, con mi proyecto fue al revés: tuve que eliminar el antiguo jquery.dimensions.pack.js, ya que "dimensions" ahora es parte de jQuery.UI. ¡Gracias por tu contribución! – RSeidelsohn

¡Increíble! ¡Comenzaré a elegir mi CSS hasta que encuentre esta publicación! ¡Aclamaciones! – Encoder

Este me recordó que mi jQuery 1.8.0.min y la interfaz de usuario 1.8.10 no coinciden. Apuntando a la versión correcta de UI (1.8.23) resolvió el problema. – dezso

puso

position: relative;

interior de

#searchFormWrapper

Fuente

2010-04-01 19:28:04 vinhboy

Probé, pero no me alegro – autonomatt

tuve un problema similar, y después de buscar descubrí que me estaba perdiendo un JS para solucionar este problema. En caso de que alguien se detenga, asegúrese de tener también un script llamado "jquery.ui.position.js".

Ver http://jqueryui.com/demos/autocomplete/ en Dependencias de la interfaz de usuario: Core interfaz de usuario UI Widget Posición

Fuente

2011-09-11 16:29:49 Chris

Esto funcionó para mí. No tenía dimensiones.js incluidas, pero todavía estaba viendo el autocompletado mal ubicado. Una vez que agregué el position.js, funcionó como se esperaba. –

@chris gracias querido me salvó – Devjosh

Me salvó el día :-) –

Otro problema similar, si estás usando un CDN para servir a sus archivos de jQuery, asegúrese de usar una versión específica, es decir:

//ajax.googleapis.com/ajax/libs/jquery/1.7.2/

En lugar de la versión 'última':

//ajax.googleapis.com/ajax/libs/jquery/1/

Th Esto eliminará la posibilidad de conflictos en lanzamientos futuros de jquery, que a menudo pueden romper una aplicación cuando la última versión de jquery se actualiza en el CDN.

Fuente

2012-08-13 09:44:53 Stu

Simplemente actualizando a la última JQueryUI funcionó el truco para mí. Comencé a tener este problema después de cambiar a Twitter Bootstrap (y el último JQuery, creo).

Fuente

2012-10-12 10:41:43 phildub

Simplemente cambié mi jquery-ui.min.js a la última versión y se corrigió el posicionamiento.

de 1.8.16 a 1.8.23 y funcionó!

Fuente

2012-11-01 14:58:52 Todd

Estaba usando jquery-ui 1.8.18 y actualicé a 1.8.23 y solucionó mi problema. – ctlockey

La actualización a v.1.9.2 rompió mi código. La actualización de 1.8.17 a 1.8.23 solucionó mi problema. Las versiones anteriores se pueden encontrar en jQuery UI github: https://github.com/jquery/jquery-ui/releases –

¡Gracias! Trabaja como un encanto :) – Phoenician

Sé que esta es una publicación anterior, pero tuve este problema y lo solucioné de otra manera.

Había actualizado jQuery, lo que hizo que el menú apareciera en left:0;top:0; en el window, en lugar de muy bien debajo de mi entrada.

Al actualizar jQuery UI lo arreglé al instante. Espero que esto sea útil para alguien.

Fuente

2013-01-17 20:36:17 Mike

¡Acabas de hacer mi noche! ¡Gracias! – jerrygarciuh

Actualice las secuencias de comandos de Jquery UI y jQuery en su proyecto, se resolverá cualquier conflicto y se solucionará el problema.

Fuente

2013-09-22 12:24:34 Ranvir

jQuery UI autocompletar mal posicionamiento

Respuesta

Cuestiones relacionadas