Autocomplete e completamento input text alternativo
Taggato: autocomplete select
- Questo topic ha 8 risposte, 2 partecipanti ed è stato aggiornato l'ultima volta 12 anni, 3 mesi fa da kolmogorov.
- AutorePost
- 20 Gennaio 2012 alle 15:29 #1662smurfPartecipante
Ciao a tutti!
Vorrei sapere se è possibile fare una cosa di questo genere:ho un input text in html dove faccio girare l’autocomplete di jquery senza alcun problema solo che, essendo l’origine della ricerca un database di articoli con relativo codice, vorrei che l’utente mentre scrive veda la descrizione del prodotto ma quando ci clicca sopra che il campo di input si compili col suo relativo codice e non con la descrizione.Ho provato a usare questa sintassi nel file che mi fa la ricerca:“$cname= “Desc.:” . $descrizione . “|” . $codice;”Sintassi riciclata da un’altra pagina che, al clic del risultato, mi apriva un link.So che l’autocomplete ha un evento che si chiama “select” ma non capisco cosa debba metterci dentro per fargli pescare il dato…Grazie in anticipo!21 Gennaio 2012 alle 14:21 #1976kolmogorovPartecipanteSalve. Nell’autocomplete, di jquery UI, il data source, ovvero i dati che servono per popolare l’autocomplete, possono essere un’array di stringhe oppure un ‘array di oggetti.Il datasource può essere restituito attraverso il metodo source del plugin stesso. Nel caso di array di stringhe, ad es.: [“pippo”, “pluto”,”topolino”]quando tu cerchi nell’input text il termine: “to” allora compariranno nell’autocomplete i valori pluto e topolino. Se tu clicchi su topolino, allora il value dell’input text diverrà pari a topolino di default. Con il metodo select, tu puoi intercettare la selezione e decidere di fare quello che vuoi con il valore selezionato invece di lasciare eseguire l’azione di default che è quella di prendere il valore selezionato e scriverlo sull’input text. Il metodo select ha una sintassi del tipo:
select: function(event, ui){
// la proprietà item dell’oggetto ui è il valore selezionato
var valoreSelezionato = ui.item;}Se ho ben capito il tuo data source restituisce un’array di stringhe,e quindi una stringa genere per ogni elemento dell’array: “Desc.: iphone4|wr56464;”quindi tornando al codice di prima, se selezioni dall’autocomplete l’iphone4 ottieni come valoreSelezionato la stringa “Desc.: iphone4|wr56464;”
Ora ottenuto questo valore tu potresti fare una cosa del genere: esplodere la stringa sfruttando il separatore pipe | , estrarre valore wr56464 e scriverlo dentro l’input text con un semplice val del tipo: $(“#mio_input_text”).val(var_codice_estratto);Però a mio avviso, la cosa più pulita sarebbe che tu, per ogni elemento dell’arraydel datasource non debba dare una semplice stringa (Es.: [“Desc.: iphone4|wr56464;” , “Desc.: iphone3|wt45611;”] ) ma un array di oggetti. Ti faccio un esempio:[{“label”:”iphone4″, “value”:”wr56464″},{“label”:”iphone3″,”value”:”wt45611″}] in questo modo, il plugin di jquery, di default, visualizza sui risultati di autocompletamento solo le label (quindi iphone4 ed iphone3) , mentre se ci clicchi, il tuo input text verrà scritto con il value dell’elemento selezionato (quindi wt…. o wr….). Non solo, potresti fare ancora di più: se sfrutti il metodo select, puoi intercettare la scelta, ed usare: ui.item.label ed ui.item.value per prelevare la label ed il value e fare, altre cose, ad esempio inserire il value sempre nell’input text e magari mettere la label in grassetto su qualche altra parte della pagina. Saluti.
24 Gennaio 2012 alle 07:53 #1977smurfPartecipanteTi ringrazio infinitamente, sei stato davvero chiarissimo (che di più non si può!).
Ora faccio un po’ di test e poi casomai richiedo aiuto qui, l’unica cosa che mi “spaventa” è che uso un metodo forse non convenzionale perchè prelevo dati da sql server ma mi sa che tu l’abbia già notato dalla stringa $cname che ho postato sopra!24 Gennaio 2012 alle 09:05 #1978smurfPartecipanteCome immaginavo non funziona… questo è lo script dell’autocomplete:
<script>$().ready(function() {$(‘input’).filter(‘.autocompleteclass’).autocomplete(“autocomplete.php”, {width: 512,scroll: true,scrollHeight: 600,matchContains: false,selectFirst: false})});</script>Questo è invece il file “autocomplete.php”<!–?php</div–>function objectToArray($d) {if (is_object($d)) {// Gets the properties of the given object// with get_object_vars function$d = get_object_vars($d);}if (is_array($d)) {/** Return array converted to object* Using __FUNCTION__ (Magic constant)* for recursive call*/return array_map(__FUNCTION__, $d);}else {// Return arrayreturn $d;}}function arrayToObject($d) {if (is_array($d)) {/** Return array converted to object* Using __FUNCTION__ (Magic constant)* for recursive call*/return (object) array_map(__FUNCTION__, $d);}else {// Return objectreturn $d;}}$client = new SoapClient(“http://xxx/gestione-ordini-lavoro?wsdl”, array(‘login’ => “username”,’password’ => “password”));$q = strtoupper($_GET);if (!$q) return;$result = $client->getAllArticoli(array(“ditta”=>’XX’, “codiceArticolo”=>”, “codiceClasseMerceologica”=>”, “descrizione”=>$q, “startRow”=>’0′, “pageSize”=>’1000′));$result2 = objectToArray($result);$i = 0;while ($i < count($result2)){$cname=$result2[$i] . “|” . $result2[$i];echo “$cnamen”;$i++;}?>Come faccio a scrivere nella variabile $cname i dati in modo che abbiano label e value?Grazie ancora!24 Gennaio 2012 alle 10:32 #1979smurfPartecipanteScusate i continui reply ma non mi faceva modificare il post precedente.
Ho risolto così nella funzione dell’autocomplete:<script>$().ready(function() {$(‘input’).filter(‘.autocompleteclass’).autocomplete(“autocomplete.php”, {width: 512,scroll: true,scrollHeight: 600,matchContains: false,selectFirst: false}).result(function(event, data) {if (data) {codice=data[1];$(‘#test’).val(codice);}})});</script>Il valore di “data” viene scritto correttamente nell’input text “test”.Le mie conoscenze javascript sono quasi nulle (penso si fosse capito), nel mio foglio ho 20 righe e quindi ho gli input text strutturati così:codarticolo[1] – codarticolo[2] – codarticolo[3] – … – codarticolo[20](anche per questo nella funzione dell’autocomplete ho usato un filter in base alla classe assegnata)Come faccio a dire di scrivere ad esempio nel campo codarticolo[1]?Grazie e scusate ancora dell’autoreply!24 Gennaio 2012 alle 10:39 #1980kolmogorovPartecipanteCiao smurf. Innanzitutto io ti consiglierei di utilizzare l’autocomplete di jquery UI che puoi trovare quì:http://jqueryui.com/demos/autocomplete/perchè il plugin di autocomplete che utilizzi tu è obsoleto:http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/
Se quindi sostituisci il plugin ed appurato che il plugin dell’autocomplete faccia correttamente la chiamata ajax verso la tua risorsa php lato server, allora quello di qui ti devi preoccupare è di restituire in formato json dei dati nello stesso formato in cui ti accennavo prima, del tipo: [{“label”:”iphone4″, “value”:”wr56464″},{“label”:”iphone3″,”value”:”wt45611″}]. Allora per ottenere questo, dentro il while, se tu fai una cosa del tipo:
$return_arr = array();while ($i < count($result2)) {$row_array = $result2[$i];$row_array = $result2[$i];array_push($return_arr, $row_array);$i++;} echo json_encode( $return_arr);Per il plugin con jquery UI, la sintassi può essere una cosa molto semplice:$(‘input’).filter(‘.autocompleteclass’).autocomplete({ source: “autocomplete.php”, minLength: 2 });}
p.s. Stavo scrivendo la risposta mentre tu stavi scrivendo a tua volta la tua risposta
24 Gennaio 2012 alle 11:20 #1981kolmogorovPartecipanteSe rimani con il plugin “vecchio”, prova ad utilizzare il metodo formatResult del plugin:
formatResult:function(data){
var valoreEstrattoCodice = …….;
return valoreEstrattoCodice; },
cancellando la funzione result ( ovvero il pezzo di codice: .result(…. ).
Diciamo che il plugin deve essere in grado di scrivere il valore selezionato dai suggerimenti direttamente nel campo di input text in cui si fà l’autocomplete, questo è il comportamento di default, e prima di vare scrivere sul campo di input text puoi formattare il valore usando formatResult.
Poi per curiosità prova a fare:
$(‘this’).val(codice);
al posto di:
$(‘#test’).val(codice);
sul codice che hai postato prima di fare le modifiche con il formatResult.25 Gennaio 2012 alle 14:05 #1982smurfPartecipantePerfetto, ho mischiato un po’ delle tue informazioni e ho raggiunto lo scopo!
Grazie infinite!!!(devo cominciare a studiare javascript…!)25 Gennaio 2012 alle 15:00 #1983kolmogorovPartecipanteMolto bene!!
- AutorePost
- Devi essere connesso per rispondere a questo topic.