Evidenziare risultato in un Datalist

[giorgius]

Ciao a tutti,
ho un Datalist che si popola automaticamente prelevando i dati da un DB...

Vorrei trovare il modo che la lettera o la parola cercata apparisse evidenziata o in grassetto nell'elenco dei risultati che appare nel select...

Ovvero, se ad esempio digito la lettera G, vorrei che tra i risultati contenenti appunto questa lettera e che andranno a popolare la select, detta lettera apparisse appunto evidenziata o in grassetto...

Qualcuno ha idea di come fare?

[Galletziz]

Fai un esempio del tuo modulo di ricerca, trascrivendolo qua e vediamo come posso aiutarti.

[giorgius]

ecco la pagina....

http://www.giorgius.net/multi/wep_p.asp

[Galletziz]

Adesso ho capito, il tuo è un modulo di ricerca in php, adesso però vedo che anche se ricerco una lettera sola tutti i nomi con quella lettera non vengono trovati, ansi, ti viene rimandato un errore dal database, comunque quello che io ti consiglierei è di utilizzare il tag <mark> </mark> oppure <strong> </strong> praticamente qua per esempio:

<option class="opt2" value="Alfano, Nicolò"><strong>Alfano, Nicolò</strong></option>

[giorgius]

???
a parte che è in asp (come si evince dal nome del file...), a me non da nessun errore dal database...
e cmq quanto mi indiche non è assolutamente quello che vorrei fare

[Galletziz]

???
a parte che è in asp (come si evince dal nome del file...), a me non da nessun errore dal database...
e cmq quanto mi indiche non è assolutamente quello che vorrei fare

ops, non avevo notato che era in asp comunque quando i cerco semplicemente la lettera "a" mi da un errore del genere:

ADODB.Recordset error '800a0bcd'
Either BOF or EOF is True, or the current record has been deleted. Requested operation requires a current record.
/multi/wep_p.asp, line 131

per quanto riguarda quello che vorresti fare magari potresti essere un po piu specifico.

[giorgius]

stranissimo...a me non da il minimo problema.....se infatti digito nel campo in rosa la lettera A, come dici, mi appaiono tutti i nomi presenti nel database con iniziato o che contengono la lettara A, appunto....
Potrebbe dipendere dal browser? io suo Mozilla....
cmq, io vorrei che quella A che appare nella lista fosse in qualche modo evidenziabile, che so, in grassetto...

[tampertools]

L'errore compare quando scrivi una lettera e schiacci su cerca.

Le datalist, come le select, non ti permettono di scrivere qualcosa che non sia testo (quindi i tag html) all'interno dei vari elementi. Anziché una datalist devi usare un div e gestire la cosa con javascript

[KillerWorm]

Ciao, quoto tampertools e aggiungo: datalist è ancora poco affidabile perché ogni browser lo gestisce in modo differente, o non lo supporta affatto. Il funzionamento potrebbe produrre risultati inaspettati e pertanto confondere gli utenti.

Personalmente su FF mi visualizza la lista delle voci in cui compare il termine digitato; invece su CH visualizza solo le voci che iniziano col termine indicato; mentre IE9 non supporta datalist e il risultato e catastrofico, mostrandomi direttamente sulla pagina la carrellata di voci.
Su FF ogni voce visualizzata sulla lista, riporta o il testo scritto tra i tag <option></option> (se presente) o solo il testo dell'attributo value (se presente); invece su CH, per ogni voce, viene mostrato il testo del value e, affianco in piccolo, il testo tra i tag (se presente); mentre su IE, non pervenuto.

Per tali motivi consiglio di utilizzare un qualche plugin jQuery (ce ne sono tanti in giro) che faccia ciò che chiedi e sia comunque crossbrowser.

Un esempio tra i vari esistenti: http://nicolasbize.com/magicsuggest/

Vedi eventualmente anche qui: http://plugins.jquery.com/tag/dropdown/

[tampertools]

Mi piace quando dicono "quoto tampertools"

Comunque se non usa jQuery non ci vuole tanto a scriversi un piccolo script in javascript puro ù.ù

<input id="mioInput">
<ul id="datalist"></ul>

var datalist = [
    "casa",
    "gatto",
    "oca",
    "cane",
    "pinguino"
],
    input = document.getElementById("mioInput"),
    list = document.getElementById("datalist");
input.onkeyup = input.onfocus = function () {
    list.innerHTML = "";
    if (!this.value) return;
    for (var i = 0; i < datalist.length; i++) {
        if (datalist[i].indexOf(this.value) !== -1) {
            list.style.display = "block";
            list.innerHTML += "<li><a onclick='document.getElementById(\"mioInput\").value=\"" + datalist[i] + "\";'>" + datalist[i] + "</a></li>";
        }
    }
};
document.body.onclick = function (e) {
    if (e.target != input) {
        list.style.display = "none";
    }
};

(Mi sa che potevo scrivere qualcosa di meglio)
http://jsfiddle.net/jgkjmL67/embedde...t,js,html,css/