Jquery - Hidel LI basato su attributo personalizzato mantenendo altri filtri - javascript, jquery, html

Ho bisogno di aiuto per raggiungere questo obiettivo poiché non sono affatto bravo con jQuery / JavaScript, ecco perché non so nemmeno come cercare la risposta:

Ho questo HTML:

<input type="text" id="searchParameter">
<ul>
<li data-sr-geolocation="USA, Miami" style="display:none;"></li>
<li data-sr-geolocation="Brazil, Sao Pablo"></li>
<li data-sr-geolocation="Canada, Quebec"></li>
</ul>

Devo nascondere i li in base al valore dell'attributo personalizzato.

Ad esempio, se sul searchParameter Ho inserito "Canada, Quebec" o "Quebec" (contiene) nascondi tutti gli altri li.

Dal momento che ho applicato altri filtri (alcuni li sonogià nascosto), dovrò solo mostrare solo quelli che contengono il valore ma non sono già nascosti da altri filtri anche se hanno il valore cercato.

risposte:

Se ho capito correttamente la domanda, puoi selezionare il visibile li elementi, nascondili e mostra quelli corrispondenti, in questo modo il tuo filtro non coinvolge elementi già nascosti:

$("li").not(":hidden")
.hide()
.filter("[data-sr-geolocation*=""+ searchParameter +""]")
.show();

Usa semplicemente i selettori di attributi CSS.

$("li").hide();
$("li[data-sr-geolocation*=""+searchString+""]").show();