• I
    User •

    [Jquery] Autocompletamento input con lista di valori

    Ciao a tutti!
    Io avrei bisogno di un plugin o qualcosa che mi permetta sia di ottenere un autocompletamento nel momento della digitazione in una input (tipo la funzione typehead di Bootstrap) ma che mi permetta anche di "appendere" più valori dentro la casella, stile messaggistica di Facebook per intenderci.
    Qualcuno sa aiutarmi?
    Gracias! :ciauz:

    0
  • F
    User Attivo •

    jQuery non dovrebbe bastare, devi dare un'occhiata alla funzione autocomplete() di jQuery UI. Nel parametro source, questa funzione ti consente di specificare un array di valori che devono apparire nello spazio di autocompletamento. Ovviamente se non si tratta di valori statici, puoi far si che quell'array venga stampato dal PHP a seconda del testo inserito dall'utente.

    Dato un input

    [html]<input type="text" id="provincia_nascita">[/html]

    il suo corrispondente codice jQuery

    $("#provincia_nascita").autocomplete({
    source: ["Caserta", "Napoli", "Benevento", "Avellino", "Salerno"],
    minLength: 2
});

    ti suggerisce le opzioni previste dall'array assegnato al parametro source, a partire dal secondo carattere digitato (minLength: 2).

    0
  • I
    User •

    Grazie mille Francesco!
    Siccome sto usando Bootstrap al suo interno c'è già una funzione js per l'autocompletamento chiamata typehead che funziona anche bene.
    Ho lasciato perdere il discorso di una lista stile facebook perché diventava poco funzionale ai miei utilizzi, anche se stilosa!

    0
  • I
    User •

    Il problema è gestire valori multipli...

    0
  • F
    User Attivo •

    Non riesco a capire la tua domanda. C'è qualcosa che non ti è chiaro nella mia spiegazione di prima? Sia autocomplete() di jQuery UI sia TypeAhead di Bootstrap prevedono il parametro source che accetta un array di stringhe. I valori da inserire nell'array li puoi decidere staticamente tu, oppure dinamicamente uno script php in base ad un tuo algoritmo. Cos'è che non riesci ad implementare?

    0
  • I
    User •

    Non si possono usare valori diversificati.
    Cioè...il campo mi fa una ricerca in tempo reale in un db, mi serve però che mi permetta di tirare fuori più campi per ogni record, quindi magari id, nome e altri da trattare singolarmente...sarò limitato io sicuramente ma fatico a comprenderlo. 🙂

    0
  • F
    User Attivo •

    @ilPas said:

    Non si possono usare valori diversificati.
    sarò limitato io sicuramente ma fatico a comprenderlo. 🙂

    Mi spiace, ma a costo di sembrare io limitato nella comprensione, faccio sul serio fatica a comprendere cosa cerchi di realizzare, cosa intendi per valori diversificati e cosa intendi per "trattarli singolarmente". Per cortesia, come faresti con uno stupido, puoi spiegarmi cosa vuoi ottenere, magari apponendo qualche esempio? Grazie.

    0
  • I
    User •

    Typehead permette, da quello che ho capito io, di gestire un singolo valore.
    Questo è il codice di esempio sul loro sito:

    <input type="text" class="span3" style="margin: 0 auto;" data-provide="typeahead" data-items="4" data-source="["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Dakota","North Carolina","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]">

    Io ho bisogno di avere due o più valori per ogni record e poterli gestire per magari campi nascosti o altro.
    Ci sono delle soluzioni di terze parti da quello che sembra.
    Scusami se non mi spiego bene. 🙂

    0
  • F
    User Attivo •

    Ma non devi fossilizzarti sull'esempio sul loro sito. E' appunto un esempio.

    Lascia perdere i parametri inline data-{$nomeparametro}, perché chiamando in quel modo il parametro source, ti può sembrare che i possibili valori di quell'array siano da stabilire obbligatoriamente prima. In realtà se tu chiami il typeahead via javascript, lasciando fuori l'HTML, puoi incapsulare nel parametro source una funzione che via AJAX ti chiama uno script PHP che elabora il contenuto dell'input, e magari quello di altri input, a tuo piacimento. Sei tu che decidi cosa mandare al PHP, cosa ricevere dal PHP e come gestire il risultato.

    Se hai un db, ed il contenuto di quell'input lo devi confrontare con più campi per avere un suggerimento, è nel file PHP che devi settare correttamente la query e restituire in output il risultato in base a più campi. Typeahead non c'entra nulla nel tuo problema, è il PHP che devi configurare. I dati ti consiglio di restituirli al jQuery in formato JSON, in modo che con la funzione $.parseJSON() puoi tranquillamente piazzarli nel source, e quindi nell'autocompletamento.

    Se neanche questa risposta risponde alla tua domanda, cedo il passo a qualcuno più esperto, a me sembra che gli strumenti con Typeahead tu ce li abbia tutti per soddisfare la tua esigenza.

    0
  • I
    User •

    Grazie Francesco per la gentilezza dimostrata!
    Alla fine sono riuscito a usare Typehead per fare di tutto e di più...
    Sono riuscito a creare un'area amministrativa con quasi tutte le ricerche in varie tabelle in tempo reale con stampa dei risultati stile Instant+Suggest, dove possibile.
    E mi è servito anche per fare "palestra" con JQuery...

    0
  • G
    User •

    Ciao Ragazzi, scusate se vi riapro quasta discussione ma anch'io mi sto trovando ad utilizzare bootstrap con il suo typeahead ma ho qualche problema nella gestire la risposta che il file php mi restituisce correttamente. In pratica vorrei utilizzare typeahead in un form e fare in modo che, selezionato un elemento della lista, venga attribuito il valore id al valore del campo input e ad altri campi dipendenti da esso. Ammetto che sono alle prime armi con bootstrap ed anche con ajax non sono un fenomeno 🙂 e quindi eccomi qui chiedervi di farmi un po' di chiarezza. Vi posto il codice da me scritto e i miei dubbi sul funzionamento, spero vogliate dissiparmeli :mmm:
    Questo è il mio html come indicato nel manuale di bootstrap ho messo il data-provide e ho aggiunto autocomplete=off come trovato in altri esempi
    [HTML]
    <input type="text" name="nCo" id="nCo" value="" class="span12" data-provide="typeahead" autocomplete="off" />
    <input type="text" name="iCo" id="iCo" value="" class="span12" />
    [/HTML]
    il mio file php, che è la sorgente del mio array, funziona correttamente e mi restituisce un array così costituito
    Array ( [0] => Array ( [idCo] => 1 [nCo] => Mario Rossi [iCo] => Via San Pietro, 54 ) [1] => Array ( [idCo] => 2 [nCo] => Matteo Bianchi [iCo] => Via Roma, 24 ) )

    file php
    [PHP]
    $co = $_POST['value'];

    $query = mysql_query("select idCo,nCo,iCo from co where nCo like '%{$co}%'") or die(mysql_error());

    while($row = mysql_fetch_array($query))
    {
    $result[] = array(
    'idCo' => $row['idCo'],
    'nCo' => $row['nCo'],
    'iCo' => $row['iCo']
    );
    }

    echo json_encode($result);
    [/PHP]

    e qui finalmente il mio script con tutti i dubbi che si porta dietro :arrabbiato:

    
<script type="text/javascript">
    $(document).ready(function(){
        $("#nCo").typeahead({
            source: function(value,process){
                $.ajax({
                    type: 'POST',
                    url: 'miofilesource.php',
                    dataType: 'json',
                    data: {'value' : value,'act':'searchCo'},
                    async: false,
                    success: function(data){
                        return  process(data);
                    }
                })
            }
        })
    });
    </script>

    i miei dubbi riguardano "return process(data);" dove negli esempi io ho trovato spesso typeahead.process(data) ma che a me restituisce errore perchè mi dice che non è una funzione come se non fosse incluso bootstrap.typeahead.js ma se recupero in php solo il valore nCo con lo script sopra riportato mi viene popolato il menù a tendina correttamente. A questo punto mi chiedo come funziona process? Se per caso non cambio lo script (quindi lascio return process(data)) ma richiedo più valori come nel file php sopra riportato in firebug mi da il seguente errore (TypeError: e.toLowerCase is not a function) e non mi popola l'elenco. Io vorrei che giustamente mi popolasse con il nome l'elenco, mi assegnasse al value di questo input il valore selezionato e mi mettesse il terzo elemento dell'array al value del campo successivo. Ma come? giustamente non vi chiedo di farlo voi per me ma di aiutarmi a capire come potrei fare. Grazie mille ragazzi e spero possiate aiutarmi

    0
  • I
    User •

    Non ho ben capito il tuo problema ma ti posto come ho utilizzato io Typehead, ho praticamente usato lo stesso codice su più caselle di input diverse e una volta impostato la prima volta bestemmiando ora funge tutto.

    
$('#input').typeahead({
        minLength: 1,
        source: function (query, process) {
            states = [];
            map = {};


            var url = "include/db/suggest.php?callback=?";


            var data = $.getJSON(url, {query: query}, function (data) {


                    $.each(data, function (i, state) {
                            map[state.no] = state;
                            states.push(state.no);
                        });


                    $(".classe").empty();
                    $.each(data, function (i, state) {
                            $("#div").append("<tr><td>" + state.id + "</td><td>" + state.no + "</td><td>" + state.n + "</td></tr>");


                        });
                    process(states);
                });
        },
        updater: function (item) {




            var url = "include/db/interactions.php?callback=?";
            var caso = "res";
            var data = $.getJSON(url, {nome: item,caso: caso}, function (data) {


                    $(".classe").empty();
                    $.each(data.gruppi, function (i, state) {
                            $("#div").append("<tr><td>" + state.id + "</td><td>" + state.no + "</td><td>" + state.n + "</td></tr>");


                        });
                });
            return item;
        }
    });

    Non è immediato da capire ma in pratica io faccio stampare in tempo reale dei valori mentre sta ricercando e quando ha finito stampa quelli definitivi.
    Ho seguito questo articolo se non sbaglio: tatiyants.com/how-to-use-json-objects-with-twitter-bootstrap-typeahead/

    0
  • G
    User •

    Ciao prima di tutto grazie per la risposta... ho comunque risolto seguendo questo esempio:
    stackoverflow.com/questions/14901535/bootstrap-typeahead-ajax-result-format-example
    Grazie ancora e spero serva ad altri

    0
Effettua l'accesso per rispondere