<!doctype html><html lang="en"><head><meta charset="utf-8"><title>jQuery UI Autocomplete - Custom data and display</title><link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"><script src="//code.jquery.com/jquery-1.10.2.js"></script><script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script><link rel="stylesheet" href="/resources/demos/style.css"><style>#project-label {display: block;font-weight: bold;margin-bottom: 1em;}#project-icon {float: left;height: 32px;width: 32px;}#project-description {margin: 0;padding: 0;}</style><script>$(function() {var projects = [{value: "jquery",label: "jQuery",desc: "the write less, do more, JavaScript library",icon: "jquery_32x32.png"},{value: "jquery-ui",label: "jQuery UI",desc: "the official user interface library for jQuery",icon: "jqueryui_32x32.png"},{value: "sizzlejs",label: "Sizzle JS",desc: "a pure-JavaScript CSS selector engine",icon: "sizzlejs_32x32.png"}];$( "#project" ).autocomplete({minLength: 0,source: projects,focus: function( event, ui ) {$( "#project" ).val( ui.item.label );return false;},select: function( event, ui ) {$( "#project" ).val( ui.item.label );$( "#project-id" ).val( ui.item.value );$( "#project-description" ).html( ui.item.desc );$( "#project-icon" ).attr( "src", "images/" + ui.item.icon );return false;}}).data( "ui-autocomplete" )._renderItem = function( ul, item ) {return $( "<li>" ).append( "<a>" + item.label + "<br>" + item.desc + "</a>" ).appendTo( ul );};});</script></head><body><div id="project-label">Select a project (type "j" for a start):</div><img id="project-icon" src="images/transparent_1x1.png" class="ui-state-default" alt=""><input id="project"><input type="hidden" id="project-id"><p id="project-description"></p></body></html>
DEMO aqui http://jsfiddle.net/fenve/hthgk/
No hay comentarios:
Publicar un comentario
Todos los comentarios son bien recibidos...