Input text che accetta solo valori da autocomplete jQuery

**gian000** · 01-04-2017, 19:48

Ciao a tutti,
ho un form con due campi input text aventi stessa classe associati allo stesso autocomplete in jQuery tramite la classe.
Fin qui tutto ok, anche se non riesco a far visualizzare la lista con solo le parole che iniziano per quella lettera digitata ma vengono fuori tutte le parole che la contengono es. digito "c" e visualizzo "occhio, cane, macchina" e mi piacerebbe visualizzare solo "cane, casa".
Come da titolo avrei bisogno di sapere come far si che in quei due input text si possano digitare solo caratteri corrispondenti ai valori dell'autocomplete e non come ora che si può inserire qualunque carattere che appunto non è contenuto nell'autocomplete.

Posto il file che includo nel mio form dove ho l'autocomplete.

codice HTML:

[COLOR=#4E9192][FONT=Monaco]<!doctype html>[/FONT][/COLOR]
[COLOR=#4E9192][FONT=Monaco]<html lang="en">[/FONT][/COLOR]
[COLOR=#4E9192][FONT=Monaco]<head>[/FONT][/COLOR]
[COLOR=#932192][FONT=Monaco]  <meta charset="utf-8">[/FONT][/COLOR]
[COLOR=#3933FF][FONT=Monaco]  <meta name="viewport" content="width=device-width, initial-scale=1">[/FONT][/COLOR]
[COLOR=#4F76CB][FONT=Monaco] <!--  		<title>jQuery UI Autocomplete - Scrollable results</title>   		 --> [/FONT][/COLOR]
[COLOR=#3933FF][FONT=Monaco]  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">[/FONT][/COLOR]
[COLOR=#3933FF][FONT=Monaco]  <link rel="stylesheet" href="/resources/demos/style.css">[/FONT][/COLOR]
[COLOR=#4E9192][FONT=Monaco]  <style>[/FONT][/COLOR]
[COLOR=#4E9192][FONT=Monaco]  .ui-autocomplete {[/FONT][/COLOR]
[COLOR=#932192][FONT=Monaco]    max-height: 100px;[/FONT][/COLOR]
[COLOR=#932192][FONT=Monaco]    overflow-y: auto;[/FONT][/COLOR]
[COLOR=#4F76CB][FONT=Monaco]    /* prevent horizontal scrollbar */[/FONT][/COLOR]
[COLOR=#932192][FONT=Monaco]    overflow-x: hidden;[/FONT][/COLOR]
[FONT=Monaco]  }[/FONT]
[COLOR=#4F76CB][FONT=Monaco]  /* IE 6 doesn't support max-height[/FONT][/COLOR]
[COLOR=#4F76CB][FONT=Monaco]   * we use height instead, but this forces the menu to always be this tall[/FONT][/COLOR]
[COLOR=#4F76CB][FONT=Monaco]   */[/FONT][/COLOR]
[COLOR=#4E9192][FONT=Monaco]  * html .ui-autocomplete {[/FONT][/COLOR]
[FONT=Monaco]    height: 100px;[/FONT]
[FONT=Monaco]  }[/FONT]
[COLOR=#4E9192][FONT=Monaco]  </style>[/FONT][/COLOR]
[COLOR=#3933FF][FONT=Monaco]  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>[/FONT][/COLOR]
[COLOR=#3933FF][FONT=Monaco]  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>[/FONT][/COLOR]
[COLOR=#4E9192][FONT=Monaco]  <script>[/FONT][/COLOR]
[FONT=Monaco]  $( function() {[/FONT]
[FONT=Monaco]    var availableTags = [[/FONT]
[COLOR=#3933FF][FONT=Monaco]    	"casa", "cane", "moto", "scooter", "auto", "trattore","aereo"[/FONT][/COLOR]
[FONT=Monaco]    ];[/FONT]
[FONT=Monaco]    $( ".autom" ).autocomplete({[/FONT]
[FONT=Monaco]      source: availableTags[/FONT]
[FONT=Monaco]    });[/FONT]
[FONT=Monaco]  } );[/FONT]
[FONT=Monaco]
[/FONT]
[COLOR=#4E9192][FONT=Monaco]  </script>[/FONT][/COLOR]
[COLOR=#4E9192][FONT=Monaco]</head>[/FONT][/COLOR]
[COLOR=#4E9192][FONT=Monaco]<body>[/FONT][/COLOR]
[FONT=Monaco] [/FONT]
[COLOR=#4E9192][FONT=Monaco]</body>[/FONT][/COLOR]
[COLOR=#4E9192][FONT=Monaco]</html>
[/FONT][/COLOR]

Ho guardato la guardato la documentazione di jQuery ma non sono riuscito a venirne a capo.
Ringrazio tutti in anticipo

**gian000** · 02-04-2017, 16:52

Per quanto riguarda la visualizzazione del carattere iniziale ho risolto cosi:

codice:

<!

codice:

doctype html>

codice:

<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet"href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet"href="/resources/demos/style.css">
<style>
.ui-autocomplete {
max-height: 100px;
overflow-y: auto;
/* prevent horizontal scrollbar */
overflow-x: hidden;
  }
/* IE 6 doesn't support max-height
   * we use height instead, but this forces the menu to always be this tall
   */
* html .ui-autocomplete {
    height: 100px;
  }
</style>

<script>
  $( function() {
    var availableTags = [
"casa", "cane", "moto", "scooter", "auto", "trattore","aereo" ];
    $( ".autom" ).autocomplete({
          source: function( request, response ) {
                  var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( request.term ), "i" );
                  response( $.grep( availableTags, function( item ){
                      return matcher.test( item );
                  }) );
              }
        });
  } );


</script>
</head>
<body>



</body>
</html>

...Mi resta capire come limitare l'inserimento nel input text... grazie

**carlomarangoni** · 02-04-2017, 17:10

Quando posti codice usa il tag [ code]....[ /code] oppure "#" in modalità avanzata

**gian000** · 03-04-2017, 22:40

Originariamente inviata da gian000

Per quanto riguarda la visualizzazione del carattere iniziale ho risolto cosi:

codice:

<!

codice:

doctype html>

codice:

<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet"href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet"href="/resources/demos/style.css">
<style>
.ui-autocomplete {
max-height: 100px;
overflow-y: auto;
/* prevent horizontal scrollbar */
overflow-x: hidden;
  }
/* IE 6 doesn't support max-height
   * we use height instead, but this forces the menu to always be this tall
   */
* html .ui-autocomplete {
    height: 100px;
  }
</style>

<script>
  $( function() {
    var availableTags = [
"casa", "cane", "moto", "scooter", "auto", "trattore","aereo" ];
    $( ".autom" ).autocomplete({
          source: function( request, response ) {
                  var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( request.term ), "i" );
                  response( $.grep( availableTags, function( item ){
                      return matcher.test( item );
                  }) );
              }
        });
  } );


</script>
</head>
<body>



</body>
</html>

...Mi resta capire come limitare l'inserimento nel input text... grazie

Qualche anima pia che mi da una mano?

**gian000** · 05-04-2017, 17:37

Credo che il posto giusto della discussione sia nella sezione JavaScript. Potete spostarmi? grazie

**gian000** · 06-04-2017, 21:48

http://forum.html.it/forum/showthread/t-1428701.html in questa discussione cozzalonero aveva trovato la soluzione qui http://www.linuxiso.it/assistenza-li...alla-list.html ... ma questo link non è più funzionante

Help please

Discussione: Input text che accetta solo valori da autocomplete jQuery

Strumenti discussione

Ricerca discussione

Visualizza

Input text che accetta solo valori da autocomplete jQuery

Permessi di invio