Foros del Web » Programando para Internet » Jquery »

autocompletar con value en input text

Estas en el tema de autocompletar con value en input text en el foro de Jquery en Foros del Web. tengo el siguiente codigo de un autocompletar con javascript @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código HTML: Ver original < html > < html lang = "en" > < ...
  #1 (permalink)  
Antiguo 01/08/2016, 17:07
 
Fecha de Ingreso: abril-2007
Ubicación: Merlo
Mensajes: 314
Antigüedad: 17 años, 7 meses
Puntos: 3
autocompletar con value en input text

tengo el siguiente codigo de un autocompletar con javascript
Código HTML:
Ver original
  1. <html lang="en">
  2.     <meta charset="utf-8">
  3.     <meta name="viewport" content="width=device-width, initial-scale=1">
  4.     <link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
  5.     <link rel="stylesheet" href="/resources/demos/style.css">
  6.     <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  7.     <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
  8.     <script>
  9.     $( function() {
  10.         var availableTags = [
  11.             <?php
  12.             echo "\"Merlo, Buenos aires\",\"Merlo, San Luis\",\"Moreno, Buenos Aires\",\"San Antonio de Padua\""
  13.             ?>
  14.         ];
  15.         $( "#tags" ).autocomplete({
  16.             source: availableTags
  17.         });
  18.     } );
  19.     </script>
  20. </head>
  21.  
  22. <div class="ui-widget">
  23.     <label for="tags">Tags: </label>
  24.     <form method="POST" action="buscar.php">
  25.     <input type="text" name="buscar" id="tags">
  26.     <input type="submit">
  27.     </form>
  28. </div>
  29.  
  30.  
  31. </body>
  32. </html>
Funciona, pero quiero cargar también el value del input text, así a buscar.php me llega el id de la ciudad y no el nombre, ya que esto en realidad lo estaría cargando de una base de datos.
Como puedo modificar el javascript para que haga esto???
Desde ya muchas gracias!!!
  #2 (permalink)  
Antiguo 02/08/2016, 08:06
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 13 años
Puntos: 977
Respuesta: autocompletar con value en input text

Puedes trabajar con índices, de tal forma que cada palabra tendría como índice en el array al id correspondiente; y, cuando lo selecciones, cargaría la palabra en el campo de texto y el id en un segundo campo que deberá estar oculto <input type="hidden" />.

Puedes echarle un vistazo a este ejemplo que hice en donde la situación es similar a la tuya.

__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #3 (permalink)  
Antiguo 02/08/2016, 17:52
 
Fecha de Ingreso: abril-2007
Ubicación: Merlo
Mensajes: 314
Antigüedad: 17 años, 7 meses
Puntos: 3
Respuesta: autocompletar con value en input text

Cita:
Iniciado por Alexis88 Ver Mensaje
Puedes trabajar con índices, de tal forma que cada palabra tendría como índice en el array al id correspondiente; y, cuando lo selecciones, cargaría la palabra en el campo de texto y el id en un segundo campo que deberá estar oculto <input type="hidden" />.

Puedes echarle un vistazo a este ejemplo que hice en donde la situación es similar a la tuya.

No pude hacerlo funcionar :(
  #4 (permalink)  
Antiguo 03/08/2016, 07:13
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 13 años
Puntos: 977
Respuesta: autocompletar con value en input text

Sin ver el código actualizado, será imposible seguir ayudándote.
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #5 (permalink)  
Antiguo 03/08/2016, 13:22
 
Fecha de Ingreso: abril-2007
Ubicación: Merlo
Mensajes: 314
Antigüedad: 17 años, 7 meses
Puntos: 3
Respuesta: autocompletar con value en input text

tengo esto
Código HTML:
Ver original
  1.     <title>DevBridge Autocomplete Demo</title>
  2.     <link href="content/styles.css" rel="stylesheet" />
  3. </head>
  4.     <div class="container">
  5.         <div style="position: relative; height: 80px;">
  6.         <form method="post" action="busqueda.php">
  7.            
  8.             <input type="text" name="country" id="autocomplete-ajax" style="position: absolute; z-index: 2; background: transparent;"/>
  9.             <input type="text" name="country" id="autocomplete-ajax-x" disabled="disabled" style="color: #CCC; position: absolute; background: transparent; z-index: 1;"/>
  10.         </div><input type="submit">     </form>
  11.  
  12.     </div>
  13.  
  14.     <script type="text/javascript" src="scripts/jquery-1.8.2.min.js"></script>
  15.     <script type="text/javascript" src="scripts/jquery.mockjax.js"></script>
  16.     <script type="text/javascript" src="src/jquery.autocomplete.js"></script>
  17.     <script type="text/javascript" src="scripts/countries.js"></script>
  18.     <script type="text/javascript" src="scripts/demo.js"></script>
  19. </body>
  20. </html>
demo.js
Código Javascript:
Ver original
  1. /*jslint  browser: true, white: true, plusplus: true */
  2. /*global $, countries */
  3.  
  4. $(function () {
  5.     'use strict';
  6.  
  7.     var countriesArray = $.map(countries, function (value, key) { return { value: value, data: key }; });
  8.  
  9.     // Setup jQuery ajax mock:
  10.     $.mockjax({
  11.         url: '*',
  12.         responseTime: 2000,
  13.         response: function (settings) {
  14.             var query = settings.data.query,
  15.                 queryLowerCase = query.toLowerCase(),
  16.                 re = new RegExp('\\b' + $.Autocomplete.utils.escapeRegExChars(queryLowerCase), 'gi'),
  17.                 suggestions = $.grep(countriesArray, function (country) {
  18.                      // return country.value.toLowerCase().indexOf(queryLowerCase) === 0;
  19.                     return re.test(country.value);
  20.                 }),
  21.                 response = {
  22.                     query: query,
  23.                     suggestions: suggestions
  24.                 };
  25.  
  26.             this.responseText = JSON.stringify(response);
  27.         }
  28.     });
  29.  
  30.     // Initialize ajax autocomplete:
  31.     $('#autocomplete-ajax').autocomplete({
  32.         // serviceUrl: '/autosuggest/service/url',
  33.         lookup: countriesArray,
  34.         lookupFilter: function(suggestion, originalQuery, queryLowerCase) {
  35.             var re = new RegExp('\\b' + $.Autocomplete.utils.escapeRegExChars(queryLowerCase), 'gi');
  36.             return re.test(suggestion.value);
  37.         },
  38.         onSelect: function(suggestion) {
  39.             $('#selction-ajax').html('You selected: ' + suggestion.value + ', ' + suggestion.data);
  40.         },
  41.         onHint: function (hint) {
  42.             $('#autocomplete-ajax-x').val(hint);
  43.         },
  44.         onInvalidateSelection: function() {
  45.             $('#selction-ajax').html('You selected: none');
  46.         }
  47.     });
  48.  
  49.     var nhlTeams = ['Anaheim Ducks', 'Atlanta Thrashers', 'Boston Bruins', 'Buffalo Sabres', 'Calgary Flames', 'Carolina Hurricanes', 'Chicago Blackhawks', 'Colorado Avalanche', 'Columbus Blue Jackets', 'Dallas Stars', 'Detroit Red Wings', 'Edmonton OIlers', 'Florida Panthers', 'Los Angeles Kings', 'Minnesota Wild', 'Montreal Canadiens', 'Nashville Predators', 'New Jersey Devils', 'New Rork Islanders', 'New York Rangers', 'Ottawa Senators', 'Philadelphia Flyers', 'Phoenix Coyotes', 'Pittsburgh Penguins', 'Saint Louis Blues', 'San Jose Sharks', 'Tampa Bay Lightning', 'Toronto Maple Leafs', 'Vancouver Canucks', 'Washington Capitals'];
  50.     var nbaTeams = ['Atlanta Hawks', 'Boston Celtics', 'Charlotte Bobcats', 'Chicago Bulls', 'Cleveland Cavaliers', 'Dallas Mavericks', 'Denver Nuggets', 'Detroit Pistons', 'Golden State Warriors', 'Houston Rockets', 'Indiana Pacers', 'LA Clippers', 'LA Lakers', 'Memphis Grizzlies', 'Miami Heat', 'Milwaukee Bucks', 'Minnesota Timberwolves', 'New Jersey Nets', 'New Orleans Hornets', 'New York Knicks', 'Oklahoma City Thunder', 'Orlando Magic', 'Philadelphia Sixers', 'Phoenix Suns', 'Portland Trail Blazers', 'Sacramento Kings', 'San Antonio Spurs', 'Toronto Raptors', 'Utah Jazz', 'Washington Wizards'];
  51.     var nhl = $.map(nhlTeams, function (team) { return { value: team, data: { category: 'NHL' }}; });
  52.     var nba = $.map(nbaTeams, function (team) { return { value: team, data: { category: 'NBA' } }; });
  53.     var teams = nhl.concat(nba);
  54.  
  55.     // Initialize autocomplete with local lookup:
  56.     $('#autocomplete').devbridgeAutocomplete({
  57.         lookup: teams,
  58.         minChars: 1,
  59.         onSelect: function (suggestion) {
  60.             $('#selection').html('You selected: ' + suggestion.value + ', ' + suggestion.data.category);
  61.         },
  62.         showNoSuggestionNotice: true,
  63.         noSuggestionNotice: 'Sorry, no matching results',
  64.         groupBy: 'category'
  65.     });
  66.    
  67.     // Initialize autocomplete with custom appendTo:
  68.     $('#autocomplete-custom-append').autocomplete({
  69.         lookup: countriesArray,
  70.         appendTo: '#suggestions-container'
  71.     });
  72.  
  73.     // Initialize autocomplete with custom appendTo:
  74.     $('#autocomplete-dynamic').autocomplete({
  75.         lookup: countriesArray
  76.     });
  77. });
  #6 (permalink)  
Antiguo 03/08/2016, 13:24
 
Fecha de Ingreso: abril-2007
Ubicación: Merlo
Mensajes: 314
Antigüedad: 17 años, 7 meses
Puntos: 3
Respuesta: autocompletar con value en input text

Y esta versión que es mas simple.
Código Javascript:
Ver original
  1. <script src="https://googledrive.com/host/0BygD_wcLS3rmSENDOURWVEZSZW8/jquery.js"></script>
  2. <script src="https://googledrive.com/host/0BygD_wcLS3rmSENDOURWVEZSZW8/jqueryui.js"></script>
  3. <link href="https://googledrive.com/host/0BygD_wcLS3rmTEJZSWJSSzAyeE0/smoothness/jquery-ui-1.10.1.custom.min.css" type="text/css" rel="stylesheet">
  4. <script type="text/javascript">
  5.     $(document).ready(inicio);
  6.     function inicio(){
  7.     var posibilidades = [
  8.         "Buenos Aires",
  9.         "Olivos",
  10.         "La Matanza",
  11.         "Moron",
  12.     ];
  13.     $("#buscador").autocomplete({source:posibilidades});
  14. }
  15. </script>
Código HTML:
Ver original
  1. <form method="post" action="busqueda.php">
  2.     <input type="text" id="buscador" name="ciudad">
  3.     <input type="submit">
  4. </form>
Lo que me gustaria, es poder enviar el id de la ciudad!!!
Tal vez al elejir una ciudad, pueda asignarle su id a un hidden, pero no se como!!!

Última edición por Gustavo1973; 03/08/2016 a las 13:37
  #7 (permalink)  
Antiguo 03/08/2016, 15:44
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 13 años
Puntos: 977
Respuesta: autocompletar con value en input text

La clave está en saber cómo devuelve los valores ese archivo "countries.js" para ver la manera de acceder al id de cada país, porque, una vez que obtengas acceso al mismo, asignarlo a un campo oculto sería sencillo mediante el método select.
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand

Etiquetas: funcion, html, input, javascript, js, php, text
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 10:35.