jQuery utilizzo di contiene e toLowerCase()

Question

Sto provando a confrontare una stringa fornita in un input al contenuto di un div utilizzando jQuery contain.

Il problema è che voglio essere in grado di controllare se la stringa è contenuta indipendentemente dal maiuscolo/minuscolo.

Questa è la mia funzione:

$(document).ready(function() { 
    drawDimensions('dContent'); 
    $('#dSuggest').keyup(function() { 
     var dInput = this.value; 
     $(".dDimension:contains('" + dInput + "')").css("display","block"); 
    }); 
}); 

Quindi, se uno dei div .dDimension contiene 'Data' e un utente preme il tasto 'd', voglio mostrare tale elemento.

è possibile?

Answer 1

È possibile utilizzare .filter^[docs]:

var dInput = this.value.toLowerCase(); 

$(".dDimension").filter(function() { 
    return $(this).text().toLowerCase().indexOf(dInput) > -1; 
}).css("display","block"); 

Answer 2

È possibile scrivere il proprio selettore estendendo jQuery. Prova questo

$.extend($.expr[':'], { 
    'containsi': function(elem, i, match, array) 
    { 
    return (elem.textContent || elem.innerText || '').toLowerCase() 
    .indexOf((match[3] || "").toLowerCase()) >= 0; 
    } 
}); 

Usage $(".dDimension:containsi('" + dInput + "')").css("display","block");

Answer 3

gli ultimi commenti a the jQuery documentation for contains fornisce un'implementazione 'icontains' che possono soddisfare voi.

$.expr[':'].icontains = function(obj, index, meta, stack){ 
    return (obj.textContent || obj.innerText || jQuery(obj).text() || '').toLowerCase().indexOf(meta[3].toLowerCase()) >= 0; 
}; 

// Example usage. 
$("div:icontains('John')").css("text-decoration", "underline"); 

Answer 4

Dai un'occhiata alla this example, si estendono i selettori di jQuery con un selettore-case insensitive contiene che chiama containsi, in questo modo:

$.extend($.expr[':'], { 
    'containsi': function (elem, i, match, array) { 
     return (elem.textContent || elem.innerText || '').toLowerCase().indexOf((match[3] || '').toLowerCase()) >= 0; 
    } 
});