Foros del Web » Programando para Internet » Jquery »

mensaje "sin resultados" en autocomplete

Estas en el tema de mensaje "sin resultados" en autocomplete en el foro de Jquery en Foros del Web. Buenos dias; La verdad no se de jquery pero si logre que funcione en mi busqueda un codigo que encontre en la web para autocompletar, ...
  #1 (permalink)  
Antiguo 21/07/2015, 10:30
Avatar de mager3  
Fecha de Ingreso: junio-2012
Ubicación: Medellin
Mensajes: 318
Antigüedad: 9 años
Puntos: 4
Información mensaje "sin resultados" en autocomplete

Buenos dias;

La verdad no se de jquery pero si logre que funcione en mi busqueda un codigo que encontre en la web para autocompletar, lo que me parece que hace falta es un mensaje de " Sin Resultados" cuando no se encuentre la busqueda en la base de datos para impedir que los usuarios ingresen codigo basura.. como lo podria hacer ?

Código Javascript:
Ver original
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>jQuery UI Autocomplete - Custom data and display</title>
  6.     <link rel="stylesheet" href="themes/base/jquery.ui.all.css">
  7.     <script src="jquery-1.8.3.js"></script>
  8.     <script src="ui/jquery.ui.core.js"></script>
  9.     <script src="ui/jquery.ui.widget.js"></script>
  10.     <script src="ui/jquery.ui.position.js"></script>
  11.     <script src="ui/jquery.ui.menu.js"></script>
  12.     <script src="ui/jquery.ui.autocomplete.js"></script>
  13.     <link rel="stylesheet" href="demos.css">
  14.     <style>
  15.     #project-label {
  16.         display: block;
  17.         font-weight: bold;
  18.         margin-bottom: 1em;
  19.     }
  20.     #project-icon {
  21.         float: left;
  22.         height: 32px;
  23.         width: 32px;
  24.     }
  25.     #project-description {
  26.         margin: 0;
  27.         padding: 0;
  28.     }
  29.     </style>
  30.     <script>
  31.     $(function() {
  32.         var projects = [
  33.             {
  34.                 value: "71294907",
  35.                 label: "71294907 Diego Mauricio Sanchez Escobar",
  36.                 desc: "Profesional Diego",
  37.                 icon: "jquery_32x32.png"
  38.             },
  39.             {
  40.                 value: "jquery-ui",
  41.                 label: "jQuery UI",
  42.                 desc: "the official user interface library for jQuery",
  43.                 icon: "jqueryui_32x32.png"
  44.             },
  45.             {
  46.                 value: "sizzlejs",
  47.                 label: "Sizzle JS",
  48.                 desc: "a pure-JavaScript CSS selector engine",
  49.                 icon: "sizzlejs_32x32.png"
  50.             }
  51.         ];
  52.  
  53.         $( "#project" ).autocomplete({
  54.             minLength: 0,
  55.             source: projects,
  56.             focus: function( event, ui ) {
  57.                 $( "#project" ).val( ui.item.label );
  58.                 return false;
  59.             },
  60.             select: function( event, ui ) {
  61.                 $( "#project" ).val( ui.item.label );
  62.                 $( "#project-id" ).val( ui.item.value );
  63.                 $( "#project-description" ).html( ui.item.desc );
  64.                 $( "#project-icon" ).attr( "src", "images/" + ui.item.icon );
  65.  
  66.                 return false;
  67.             }
  68.         })
  69.         .data( "autocomplete" )._renderItem = function( ul, item ) {
  70.             return $( "<li>" )
  71.                 .data( "item.autocomplete", item )
  72.                 .append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
  73.                 .appendTo( ul );
  74.         };
  75.     });
  76.     </script>
  77. </head>
  78. <body>
  79.  
  80. <div id="project-label">Select a project (type "j" for a start):</div>
  81. <img id="project-icon" src="images/transparent_1x1.png" class="ui-state-default" alt="">
  82. <input id="project">
  83. <input type="hidden" id="project-id">
  84. <p id="project-description"></p>
  85.  
  86. <div class="demo-description">
  87. <p>You can use your own custom data formats and displays by simply overriding the default focus and select actions.</p>
  88. <p>Try typing "j" to get a list of projects or just press the down arrow.</p>
  89. </div>
  90. </body>
  91. </html>

Etiquetas: jqueryui
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 14:00.