2010-04-30 24 views
8

La página de demostración de IU de JQuery para autocompletar (link) tiene un cuadro de búsqueda atractivo y desplegable con bonitos colores y realces y tal. Cuando lo implemento por mí mismo, termino con una lista con viñetas. ¿Cómo hago para que mi lista desplegable de sugerencias se parezca a la de ellos?JQuery UI Autocompletar mostrando como viñetas

ALGUNAS NOTAS/fragmentos de código:

  • que estoy trabajando en la tierra .NET, así que estoy usando la etiqueta <asp:ScriptManager> con <asp:ScriptReference> s dentro de ella para obtener los jquery.min.js alojados (1,4 .2) y jquery-ui.min.js (1.8.1) archivos de Google.
  • Mi cuadro de entrada es bastante simple: <div class='ui-widget'> <label for="terms">Term: </label> <input id="terms" class="ui-autocomplete-input"> </div>
  • Mi autocompletar se parece a: $(""#terms"").autocomplete({source:""GetAttributesJSON.aspx"",minLength:2});

consigo los datos correctos hacia atrás, de manera que no es la cuestión. Solo quiero gráficos sofisticados. Cualquier pensamiento sería muy apreciado.

+8

¿También tienen enlaces a los archivos CSS jQuery UI? – Zack

+0

@awshepard: crea un tema e inclúyelo: http://jqueryui.com/themeroller/ y resuelve el problema. Aparecen como viñetas porque sin el UI CSS se ven como los LI típicos. – karim79

Respuesta

10

Como Karim79 y Zack han mencionado, necesitas darle estilo a la lista. Puede crear su propio tema y descargarlo. Se puede encontrar más información en here. Opcionalmente puede usar uno de los muchos temas preconstruidos e incluirlo en su documento. Simplemente vaya al Jquery Download Page y seleccione el tema que desea.

A continuación, sólo se incluyen en el archivo .css

<link type="text/css" href="http://yourwebsite.com/css/ui-lightness/jquery-ui-1.8.custom.css" rel="stylesheet" /> 
+0

Sí, hay un problema. ¡Gracias! – awshepard

Cuestiones relacionadas