jQuery Italia - Forum » Supporto ed Aiuto » Problemi con jQuery UI

Autocomplete e completamento input text alternativo

(9 articoli)
  1. smurf
    Membro

    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!

    Pubblicato 3 months fa #
    Private
  2. kolmogorov
    Membro

    Salve. 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.

    Pubblicato 3 months fa #
    Edit page
  3. smurf
    Membro

    Ti 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!

    Pubblicato 3 months fa #
  4. smurf
    Membro

    Come 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 array
    return $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 object
    return $d;
    }
    }
    $client = new SoapClient("http://xxx/gestione-ordini-lavoro?wsdl", array('login' => "username",'password' => "password"));
    $q = strtoupper($_GET['q']);
    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['return']))
    {
    $cname=$result2['return'][$i]['descrizione'] . "|" . $result2['return'][$i]['codiceArticolo'];
    echo "$cname\n";
    $i++;
    }
    ?>
    Come faccio a scrivere nella variabile $cname i dati in modo che abbiano label e value?
    Grazie ancora!

    Pubblicato 3 months fa #
    Register
  5. smurf
    Membro

    Scusate 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!

    Pubblicato 3 months fa #
    Private
  6. kolmogorov
    Membro

    Ciao 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['return'])) {$row_array['value'] = $result2['return'][$i]['codiceArticolo'];$row_array['label'] = $result2['return'][$i]['descrizione'];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 :)

    Pubblicato 3 months fa #
  7. kolmogorov
    Membro

    Se 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.

    Pubblicato 3 months fa #
  8. smurf
    Membro

    Perfetto, ho mischiato un po' delle tue informazioni e ho raggiunto lo scopo!

    Grazie infinite!!!

    (devo cominciare a studiare javascript...!)

    Pubblicato 3 months fa #
  9. kolmogorov
    Membro

    Molto bene!! :)

    Pubblicato 3 months fa #

RSS feed for this topic

Replica

Devi aver fatto il login per poter pubblicare articoli.