Ver Mensaje Individual
  #5 (permalink)  
Antiguo 03/08/2016, 13:22
Gustavo1973
 
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. });