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:

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
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
 

ypsilon86

Utente Attivo
18 Dic 2012
48
0
0
Roma
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:

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
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
 

ypsilon86

Utente Attivo
18 Dic 2012
48
0
0
Roma
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:

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
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"
 

ypsilon86

Utente Attivo
18 Dic 2012
48
0
0
Roma
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?
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Quindi se ho per es. 10 campi testo dovrò modificare il javascript richiamando per 10 volte ogni campo testo giusto?
esattamente
 

ypsilon86

Utente Attivo
18 Dic 2012
48
0
0
Roma
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>
 

ypsilon86

Utente Attivo
18 Dic 2012
48
0
0
Roma
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>
 

ypsilon86

Utente Attivo
18 Dic 2012
48
0
0
Roma
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
Autore Titolo Forum Risposte Data
filomeni Autocomplete jquery con php/mysql Snippet Javascript 0
M jquery autocomplete multiple values data source jQuery 0
andrea.peo Autocomplete Jquery php mysql su più campi inpunts jQuery 8
C Autocomplete jquery che non filtra! PHP 0
A Jquery Autocomplete non mi funziona Javascript 3
max1974 autocomplete trigger select jQuery 0
D [ASP] Autocomplete cerca su 2 campi del db Classic ASP 1
V autocomplete su più campi Ajax 1
S Autocomplete va in locale ma non su Aruba jQuery 1
M Form con campi autocomplete Javascript 1
felino JqueryUi Combo Autocomplete e Validation jQuery 1
M Filtrare AutoComplete Extender Ajax 1
W Aiuto su AUTOCOMPLETE Javascript 0
D Jquery - modifica elemenento onlick jQuery 1
E Problema jquery Success jQuery 2
R jquery che cambia css di un elemento non mi funziona sulla pagina caricata da ajax Ajax 5
E PHP & jQuery PHP 8
P jquery refresh div non funziona Javascript 0
P lanciare script asp (o php) da jquery Javascript 1
T aiuto per trasformare un quiz fatto in JS in un quiz in JQUERY jQuery 0
Z CSS Slideshow senza JS e JQUERY HTML e CSS 2
Z CSS Slideshow senza JS e JQUERY HTML e CSS 2
MarcoGrazia Validazione remota tramite plugin (jquery validate) Snippet Javascript 0
M Come selezionare e deselezionare radiobutton con jquery jQuery 1
M Come validare textarea con jquery jQuery 0
R Aggiornare record mysql con Ajax, jQuery e php Ajax 2
P Funzione jQuery Ajax invio file a php jQuery 1
Cosina Menu fisso copre i titoli quando cliccati nel sommario jQuery Javascript 4
MarcoGrazia jquery validate() controllo checkbox jQuery 2
D assegnare risultato di una jquery ad una text Javascript 2
felino [JQuery] Append dopo ultimo ul li del primo livello jQuery 2
A php metodo post jquery non da mai errore jQuery 4
T problema con select dinamica con jquery Javascript 0
P jquery .load jQuery 10
E Div che scompare con scroll jquery Javascript 0
T script jquery non funziona più dopo il passaggio a MVC jQuery 5
B jQuery - hide & show li items jQuery 13
Y jQuery Animation Switch On Off jQuery 0
claudio_lorenzo [Javascript] aiuto su jquery per calcolo altezze dom Javascript 1
O [Javascript] Conflitto Jquery: forse... Javascript 0
MarcoGrazia jquery validate, necessità di validare almeno un elemento select su due jQuery 1
M inserire i dati ottenuti da una jquery in una tabella già esistente jQuery 1
D Jquery, conflitto tra loro risolvibile? jQuery 7
M Filtrare risultati con valori checkbox passati con jquery jQuery 2
Tommy03 Variabile PHP dentro a JQuery PHP 3
L Problema jQuery validation AJAX (PHP 7) PHP 6
G Campo HTML input file con jQuery jQuery 0
P Jquery event nel foreach php jQuery 3
M leggere con jquery/ajax in una function javascript record di database sql server Javascript 0
A [Javascript] Ajax, Jquery e PHP Javascript 1

Discussioni simili