Autocomplete Jquery

ypsilon86

Utente Attivo
18 Dic 2012
48
0
0
Roma
Ciao a tutti, sto utilizzando in una tabella, contenuta in un form, l'Autocomplete di jquery.

Non vi posto tutto il codice, ma solo una parte.
Praticamente riesco ad utilizzare l'autocomplete solo nel primo campo testo, negli altri non me lo fa usare. Solo nella prima riga funziona!

HTML:
<form action="<?php echo $editFormAction; ?>" method="get" name="form1" id="form1">
<table>

  <tr>
      <td nowrap="nowrap" align="right">1°</td>
      <td>
      <input type="input" id="tag" name="tag" value="" class="maschi" placeholder="Cerca..."/>
      <input type="hidden" id="tagid" name="tagid" value=""/>
      </td>
  </tr>

  <tr>
      <td nowrap="nowrap" align="right">2°</td>
      <input type="input" id="tag" name="tag" value="" class="maschi" placeholder="Cerca..."/>
      <input type="hidden" id="tagid" name="tagid" value=""/>
      </td>
  </tr>

</table>
</form>

l'Autocomplete prende i nomi dentro un mio database MySql, posto la pagina che mi permette di fare questo:

PHP:
<?php
//creo un array vuoto
$return_arr = array();

//dati di accesso (ovviamente con i dati di accesso)
$dbhost = '...';
$dbuser = '...';
$dbpass = '...';
$dbname = 'db_and_sito';

//connessione a mysql
$conn = mysql_connect($dbhost, $dbuser, $dbpass)
or die ('Impossibile connettersi a Mysql');
//selezione ddb
mysql_select_db($dbname);

//se connesso
if ($conn) {
    //se è presente il valore term
    if (isset($_GET) && isset($_GET['term']) && !empty($_GET['term'])) {
        $term = $_GET['term'];
        //eseguo la query
        $query = "SELECT * FROM clienti WHERE nome LIKE '%{$term}%' ";
        $query .= "ORDER BY nome ASC ";
        $fetch = mysql_query($query);
        //mi costruisco l'array
        while ($row = mysql_fetch_array($fetch, MYSQL_ASSOC)) {
            $row_array['label'] = $row['nome'];
            $row_array['value'] = $row['id_cliente'];
            array_push($return_arr, $row_array);
        }
    }
}
//chiudo la connessione a mysql
mysql_close($conn);

//restituisco l'array in formato json
echo json_encode($return_arr);
?>
 
Ultima modifica di un moderatore:
Ciao
non puoi assegnare lo stesso id a piu elementi, l'id deve essere univoco percio seil primo lo chiami tag il secondo lo dovrai chiamare tag1, stessa cosa per i name degli input
formatta il codice prima di postarlo (ultime icone seconda riga della barra di formattazione
 
Scusami Cri cosa intendi con "ultime icone seconda riga della barra di formattazione"? Ti riferivi al atto che avevo tralasciato un TD? :)

Così formattato va bene?
HTML:
<form action="<?php echo $editFormAction; ?>" method="get" name="form1" id="form1">

<table>

  <tr>
      <td nowrap="nowrap" align="right">1°</td>
<td> <input type="input" id="tag" name="tag" value="" class="maschi" placeholder="Cerca..."/>
<input type="hidden" id="tagid" name="tagid" value=""/></td>
<tr>

<tr>
<td nowrap="nowrap" align="right">2°</td>
<td><input type="input" id="tag1" name="tag1" value="" class="maschi" placeholder="Cerca..."/>
<input type="hidden" id="tagid1" name="tagid1" value=""/>
</td>
</tr>
</table>
</form>
Devo cambiare il name e l'id anche al campo di testo nascosto?

Grazie

A.
 
Ultima modifica di un moderatore:
intendevo queste
iconeformattazione.png
servono per racchiudere e formattare il codice
Devo cambiare il name e l'id anche al campo di testo nascosto?
si
posta anche la parte di codice javascript che fa riferimento all'id tag
 
Anche se cambio l'ID all'altro campo testo non mi funziona :(

Posto anche il javascript:

HTML:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.js">< /script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/i18n/jquery.ui.datepicker-it.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/base/jquery-ui.css" type="text/css" />
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/redmond/jquery-ui.css" type="text/css" />

<script type="text/javascript">
    $(document).ready(function() {
        $("#tag").autocomplete({
            source: "data.php",
            minLength: 2,
            focus: function( event, ui ) {
                $(this).val(ui.item.label);
                return false;
            },
            change: function(event, ui) {
                if (!ui.item) {     
                    $(this).val('');
                    $('#tagid').val('');
                    return false;
                }
            },
            select: function(event, ui) {
                $(this).val(ui.item.label);
                $('#tagid').val(ui.item.value);                
                return false;
            }
        });
    });
</script>


<form action="<?php echo $editFormAction; ?>" method="get" name="form1" id="form1">

<table>

  <tr>
      <td nowrap="nowrap" align="right">1°</td>
      <td><input type="input" id="tag" name="tag" value="" class="maschi" placeholder="Cerca..."/><input type="hidden" id="tagid" name="tagid" value=""/></td>
  </tr>

  <tr>
     <td nowrap="nowrap" align="right">2°<td>
     <td><input type="input" id="tag1" name="tag1" value="" class="maschi" placeholder="Cerca..."/><input type="hidden" id="tagid1" name="tagid1" value=""/></td>
  </tr>

</table>

</form>
la pagina a cui fa riferimento il javascript per prendere il nome nel database è questo:

PHP:
<?php
//creo un array vuoto
$return_arr = array();

//dati di accesso
$dbhost = 'localhost';
$dbuser = 'root';
$dbpass = '';
$dbname = 'db_and_sito';

//connessione a mysql
$conn = mysql_connect($dbhost, $dbuser, $dbpass)
or die ('Impossibile connettersi a Mysql');
//selezione ddb
mysql_select_db($dbname);

//se connesso
if ($conn) {
    //se è presente il valore term
    if (isset($_GET) && isset($_GET['term']) && !empty($_GET['term'])) {
        $term = $_GET['term'];
        //eseguo la query
        $query = "SELECT * FROM clienti WHERE nome LIKE '%{$term}%' ";
        $query .= "ORDER BY nome ASC ";
        $fetch = mysql_query($query);
        //mi costruisco l'array
        while ($row = mysql_fetch_array($fetch, MYSQL_ASSOC)) {
            $row_array['label'] = $row['nome'];
            $row_array['value'] = $row['id_cliente'];
            array_push($return_arr, $row_array);
        }
    }
}
//chiudo la connessione a mysql
mysql_close($conn);

//restituisco l'array in formato json
echo json_encode($return_arr);
?>

 
Ultima modifica di un moderatore:
dovrai ripetere 2 volte la chiamata all'autocomplete una volta per ogni id
HTML:
<script type="text/javascript">
    $(document).ready(function(){
        $("#tag").autocomplete({
            source: "data.php",
            minLength: 2,
            focus: function( event, ui ) {
                $(this).val(ui.item.label);
                return false;
            },
            change: function(event, ui) {
                if (!ui.item) {
                    $(this).val('');
                    $('#tagid').val('');
                    return false;
                }
            },
            select: function(event, ui) {
                $(this).val(ui.item.label);
                $('#tagid').val(ui.item.value);
                return false;
            }
        });
        $("#tag1").autocomplete({
            source: "data.php",
            minLength: 2,
            focus: function( event, ui ) {
                $(this).val(ui.item.label);
                return false;
            },
            change: function(event, ui) {
                if (!ui.item) {
                    $(this).val('');
                    $('#tagid1').val('');
                    return false;
                }
            },
            select: function(event, ui) {
                $(this).val(ui.item.label);
                $('#tagid1').val(ui.item.value);
                return false;
            }
        });
    });
</script>
nel form c'è un errore : non esiste il type="input"
dovrebbe essere type="text"
 
Paroverò a cambiare intput con text. Quindi se ho per es. 10 campi testo dovrò modificare il javascript richiamando per 10 volte ogni campo testo giusto?
 
Quindi se ho per es. 10 campi testo dovrò modificare il javascript richiamando per 10 volte ogni campo testo giusto?
esattamente
 
Grazie CRIRIC :cool:

Posto il codice completo per poter utilizzare l'Autocomplete jq in una tabella più di una volta (tabella di 2 righe).
Non ho postato la pagina "data.php" che non viene visualizzata dall'utente, l'ho già precedentemente inserita nei vecchi commenti.

HTML:
    source: "data.php",
            minLength: 2,
            focus: function( event, ui ) {
                $(this).val(ui.item.label);
                return false;
            },
            change: function(event, ui) {
                if (!ui.item) {
                    $(this).val('');
                    $('#tagid1').val('');
                    return false;
                }
            },
            select: function(event, ui) {
                $(this).val(ui.item.label);
                $('#tagid1').val(ui.item.value);
                return false;
            }
        });


<body>

<table align="center">


<tr valign="baseline">
      <td nowrap="nowrap" align="right">1°</td>
      <td><input type="text" id="tag" name="tag">
          <input type="hidden" id="tagid" name="tagid"/></td>
      <td><select name="nome">
</tr>

<tr valign="baseline">
      <td nowrap="nowrap" align="right">2°</td>
      <td><input type="text" id="tag1" name="tag1">
          <input type="hidden" id="tagid1" name="tagid1"/></td>
      <td><select name="nome">
</tr>

</table>

</body>
 
Risposto lo script (non so perchè ne è andata persa una parte)

HTML:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/i18n/jquery.ui.datepicker-it.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/base/jquery-ui.css" type="text/css" />
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/redmond/jquery-ui.css" type="text/css" />




<script type="text/javascript">
    $(document).ready(function() {
        $("#tag").autocomplete({
            source: "data.php",
            minLength: 2,
            focus: function( event, ui ) {
                $(this).val(ui.item.label);
                return false;
            },
            change: function(event, ui) {
                if (!ui.item) {     
                    $(this).val('');
                    $('#tagid').val('');
                    return false;
                }
            },
            select: function(event, ui) {
                $(this).val(ui.item.label);
                $('#tagid').val(ui.item.value);                
                return false;
            }
        });
		$("#tag1").autocomplete({
			source: "data.php",
            minLength: 2,
            focus: function( event, ui ) {
                $(this).val(ui.item.label);
                return false;
            },
            change: function(event, ui) {
                if (!ui.item) {
                    $(this).val('');
                    $('#tagid1').val('');
                    return false;
                }
            },
            select: function(event, ui) {
                $(this).val(ui.item.label);
                $('#tagid1').val(ui.item.value);
                return false;
            }
        });
    });
</script>
 
CriRic funziona tutto, ma in realtà ho un problema:

Dovrei far in modo che il tag id & name si integrassero automaticamente, in base al numero che inserisco nel form della prima pagina.
Mi spiego meglio, ho una pagina ".php" che rimanda a un'altra pagina (immissionedati.php) la quale contiene un Form, nel cui interno sono riportate delle categorie ripartite in maschi e femmine, come segue:

HTML:
<body>

<form action="immissionedati.php" method="post" id="inserisci">

<table border="0">
  <tr>
   <td>&nbsp;</td>
    <td width="100" align="center">Maschi</td>
    <td width="100" align="center">Femmine</td>    
  </tr>
  
  <tr>
    <td>VETERANI</td>
    <td align="center"><input name="veteraniM" type="text" size="2" maxlength="2" id="veteraniM" /></td>
    <td align="center"><input name="veteraniF" type="text" size="2" maxlength="2" id="veteraniF"/></td>
  </tr>
  
  <tr>
    <td>CAMPIONI</td>
    <td align="center"><input name="campioniM" type="text" size="2" maxlength="2" id="campioniM"/></td>
    <td align="center"><input name="campioniF" type="text" size="2" maxlength="2" id="campioniF"/></td>
  </tr>
  
  <tr>
    <td>LIBERA</td>
    <td align="center"><input name="liberaM" type="text" size="2" maxlength="2" id="liberaM"/></td>
    <td align="center"><input name="liberaF" type="text" size="2" maxlength="2" id="liberaF"/></td>
    
  </tr>
  <tr>
    <td>LAVORO</td>
    <td align="center"><input name="lavoroM" type="text" size="2" maxlength="2" id="lavoroM"/></td>
    <td align="center"><input name="lavoroF" type="text" size="2" maxlength="2" id="lavoroF"/></td>
    
  </tr>
  <tr>
    <td>INTERMEDIA</td>
    <td align="center"><input name="intermediaM" type="text" size="2" maxlength="2" id="intermediaM"/></td>
    <td align="center"><input name="intermediaF" type="text" size="2" maxlength="2" id="intermediaF"/></td>
    
  </tr>
  <tr>
    <td>GIOVANI</td>
    <td align="center"><input name="giovaniM" type="text" size="2" maxlength="2" id="giovaniM"/></td>
    <td align="center"><input name="giovaniF" type="text" size="2" maxlength="2" id="giovaniF"/></td>
    
  </tr>
   <tr>
    <td>JUNIORES</td>
    <td align="center"><input name="junioresM" type="text" size="2" maxlength="2" id="junioresM"/></td>
    <td align="center"><input name="junioresF" type="text" size="2" maxlength="2" id="junioresF"/></td>
    
  </tr>
  <tr>
    <td>PUPPY</td>
    <td align="center"><input name="puppyM" type="text" size="2" maxlength="2" id="puppyM"/></td>
    <td align="center"><input name="puppyF" type="text" size="2" maxlength="2" id="puppyF"/></td>
  </tr>
  <tr>
    <td colspan="3" align="center">      <input name="Invia" type="submit" value="INVIA" />      </td>
  </tr>
</table>
</form>

</body>

Considerando la pagina invisibile all'utente "data.php" :
PHP:
//creo un array vuoto
$return_arr = array();

//dati di accesso
$dbhost = 'localhost';
$dbuser = 'root';
$dbpass = '';
$dbname = 'db_sito';

//connessione a mysql
$conn = mysql_connect($dbhost, $dbuser, $dbpass)
or die ('Impossibile connettersi a Mysql');
//selezione ddb
mysql_select_db($dbname);

//se connesso
if ($conn) {
    //se è presente il valore term
    if (isset($_GET) && isset($_GET['term']) && !empty($_GET['term'])) {
        $term = $_GET['term'];
        //eseguo la query
        $query = "SELECT * FROM clienti WHERE nome LIKE '%{$term}%' ";
        $query .= "ORDER BY nome ASC ";
        $fetch = mysql_query($query);
        //mi costruisco l'array
        while ($row = mysql_fetch_array($fetch, MYSQL_ASSOC)) {
            $row_array['label'] = $row['nome'];
            $row_array['value'] = $row['id_cliente'];
            array_push($return_arr, $row_array);
        }
    }
}
//chiudo la connessione a mysql
mysql_close($conn);

//restituisco l'array in formato json
echo json_encode($return_arr);

Dovrei fare in modo tale che se inserisco per esempio nel campo "Veterani Maschi" (della prima pagina)-> 4, lui mi genera i tag id & name, rispettivamente così: id='tag', id='tag1', id='tag2',id='tag3'... e name='tag',name='tag1', name='tag2', name='tag3'. In questo modo non dovrò richiamare (nello script) prima della chiusura dell'head tutti i campi per l'inserimento dell'Autocomplete jq.

HTML:
<head>
<!-- Script per fare la ricerca con Autocomplete-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/i18n/jquery.ui.datepicker-it.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/base/jquery-ui.css" type="text/css" />
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/redmond/jquery-ui.css" type="text/css" />

<script type="text/javascript">
    $(document).ready(function() {
        $("#tag").autocomplete({
            source: "data.php",
            minLength: 2,
            focus: function( event, ui ) {
                $(this).val(ui.item.label);
                return false;
            },
            change: function(event, ui) {
                if (!ui.item) {     
                    $(this).val('');
                    $('#tagid').val('');
                    return false;
                }
            },
            select: function(event, ui) {
                $(this).val(ui.item.label);
                $('#tagid').val(ui.item.value);                
                return false;
            }
        });
		$("#tag1").autocomplete({
			source: "data.php",
            minLength: 2,
            focus: function( event, ui ) {
                $(this).val(ui.item.label);
                return false;
            },
            change: function(event, ui) {
                if (!ui.item) {
                    $(this).val('');
                    $('#tagid1').val('');
                    return false;
                }
            },
            select: function(event, ui) {
                $(this).val(ui.item.label);
                $('#tagid1').val(ui.item.value);
                return false;
            }
        });
    });
</script>

</head>
<body>
<table border="1">
[PHP]<?php
if (((int) $_POST['veteraniM , campioniM , liberaM , lavoroM , intermediaM , giovaniM , junioresM , puppyM']) > 0) {
    // ***APERTURA mostra/nascondi categoria MASCHI ?> [/PHP]
<tr>
    <td colspan="3" align="center"><h2>MASCHI</h2></td>
  </tr>
[PHP]<?php
}
// ***CHIUSURA mostra/nascondi MASCHI?>
<?php
if (((int) $_POST['veteraniM']) > 0) {
    // ***APERTURA mostra/nascondi categoria VeteraniM ?>  [/PHP]

<tr>
  <td colspan="3"><h4>Veterani</h4></td>
  </tr>
[PHP]<?php
}
// ***CHIUSURA mostra/nascondi VeteraniM?> 


  <?php
  
  for ($vm = 0; $vm < (int) $_POST['veteraniM']; $vm++) { 
    echo "<tr>"; 
    echo "<td>" . ($vm+1) . "°</td>"; 
	 
    echo "<td><input type='text' id='tag' name='tag' class='maschi' placeholder='Inserisci veterano...'/>
          <input type='hidden' id='tagid' name='tagid' /></td>";
	
	echo "<td><input type='text' name='vm" . $vm . "'/></td>"; 
	
    echo "</tr>"; 
}
  ?>
  
  <?php
if (((int) $_POST['campioniM']) > 0) {
    // ***APERTURA mostra/nascondi categoria CampioniM?>[/PHP]
<tr>
  	<td colspan="3"><h4>Campioni</h4></td>
  </tr>
[PHP]<?php
}
// ***CHIUSURA mostra/nascondi CampioniM?> 


    <?php
  for ($vm = 0; $vm < (int) $_POST['campioniM']; $vm++) { 
    echo "<tr>"; 
    echo "<td>" . ($vm+1) . "°</td>"; 
	
    echo "<td><input type='text' id='tag1' name='tag1' class='maschi' placeholder='Inserisci veterano...'/>
          <input type='hidden' id='tagid1' name='tagid1' /></td>";
	
	echo "<td><input type='text' name='vm" . $vm . "'/></td>"; 
	
    echo "</tr>"; 
}
  ?>[/PHP]

</body>

Dovrei trovare un modo che mi permetta di incrementare i due tag (id e name) automaticamente, in base al numero che inserisco.
E' possibile?
 

Discussioni simili