Input Javascript Dinamico

**fluxKami** · 24-02-2017, 12:57

Buongiorno.
Ho una query che mi prende una lista di nomi da un database. Li smisto in una tabella (o volendo una serie di selettori come div, p eccetera) ma vorrei che non fossero visibili: penso in questo caso che la soluzione migliore sia dare "height: 0" alle righe.
Sopra a questa tabella vorrei una barra di ricerca che, mentre scrivo, mi mostra i nomi che iniziano con la stringa che sto scrivendo, oppure in generale che la contengano (dando comunque priorità a quelli che iniziano con la stringa). Quindi questo input non deve avere alcun submit, ogni lettera/carattere che inserisco durante la scrittura deve cambiare la visualizzazione dei nomi (per esempio riportando l'height ad un valore normale).
Allego un'immagine per dare meglio l'idea.
Senza titolo-1.png
Grazie in anticipo a chiunque mi aiuti.

**cavicchiandrea** · 24-02-2017, 13:24

http://jqueryui.com/autocomplete/

**lucavizzi** · 24-02-2017, 14:36

Una soluzione "artigianale":

codice:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Inline filter</title>
<script src="http://ajax.googleapis.com/ajax/libs...n.js"></script>
<script type="text/javascript">
function filter(key){
 key=key.toLowerCase();
 $('[data-filter^="'+key+'"]').slideDown();
 $('[data-filter]').not('[data-filter^="'+key+'"]').slideUp();
}
</script>
<style type="text/css">
.item{
 padding:8px;
 border-bottom:1px solid #ccc;
 background:#f5f5f5;
 display:none;
}
</style>
</head>
<body>
<input onInput="filter(this.value)" placeholder="Ricerca...">
<hr>
<div data-filter="pippo" class="item">Pippo</div>
<div data-filter="pluto" class="item">Pluto</div>
<div data-filter="paperino" class="item">Paperino</div>
<!-- nota che i data-attributes sono scritti in minuscolo -->
</body>
</html>

Come alternativa potresti valutare DataTables.

**fluxKami** · 24-02-2017, 16:31

Ringrazio molto entrambi, appena passerò ad implementare la funzione valuterò quale delle due fa al caso mio anche se probabilmente opterò per quella artigianale, visto che (oltre che apparentemente più semplice) credo di capire come funzioni.

Già che ci sono chiedo un consiglio generico: "sono" un webdesigner, quindi lavoro sul lato web e non in locale, e di javascript + jquery conosco una minima parte. Se dovessi studiarmelo tutto, mi hanno consigliato di imparare prima il C (nonostante non mi serva) per essere più facilitato (motivo: con C impari a programmare, punto). Voi cosa mi consigliereste?

**lucavizzi** · 24-02-2017, 16:49

Originariamente inviata da fluxKami

Ringrazio molto entrambi, appena passerò ad implementare la funzione valuterò quale delle due fa al caso mio anche se probabilmente opterò per quella artigianale, visto che (oltre che apparentemente più semplice) credo di capire come funzioni.

Già che ci sono chiedo un consiglio generico: "sono" un webdesigner, quindi lavoro sul lato web e non in locale, e di javascript + jquery conosco una minima parte. Se dovessi studiarmelo tutto, mi hanno consigliato di imparare prima il C (nonostante non mi serva) per essere più facilitato (motivo: con C impari a programmare, punto). Voi cosa mi consigliereste?

Probabilmente non esiste una risposta univoca alla tua domanda, dipende dal background del singolo.

Propedeutici a JavaScript sono HTML e CSS. Se conosci questi, non dovresti fare estrema fatica ad entrare nell'ottica di js in quanto serve a manipolare l'uno, l'altro o entrambi.

**fluxKami** · 26-02-2017, 22:41

Un'ulteriore domanda: è possibile impostare più di un data-filter?
Ho impostato una variabile php ma in realtà ne avrei due e vorrei che i risultati venissero fuori sia digitando la prima che la seconda nell'input: si può fare?

**lucavizzi** · 27-02-2017, 13:44

Non puoi creare due div ad ogni iterazione?
Oppure le due variabili vengono visualizzate appaiate all'interno del div? Tipo nome e cognome.

**fluxKami** · 27-02-2017, 14:45

Precisamente la seconda.
Nello stesso div ho nome e cognome, oppure nome e codice.
Mi farebbe comodo che il risultato venisse fuori sia cercando il nome, sia cercando il cognome.
Avevo pensato

codice HTML:

echo "<li class='searchitem' data-filter='", strtolower($ppnome), ", ", $strtolower($ppcodice), "'>Testo</li>

**lucavizzi** · 27-02-2017, 19:18

Ho abbandonato del tutto i data attributes.
Questa versione cerca corrispondenze all'interno dei div con classe "item".

codice:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Inline filter</title>
<!--inclusione di jQuery-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
function filter(key){
 $('.item').each(function(){
      if($(this).text().toLowerCase().indexOf(key.toLowerCase())!=-1){
   $(this).slideDown();
  }else{
   $(this).slideUp();
  }
   });
}
</script>
<style type="text/css">
.item {
 padding: 8px;
 border-bottom: 1px solid #ccc;
 background: #f5f5f5;
 display: none;
}
</style>
</head>
<body>
<input onInput="filter(this.value)" placeholder="Ricerca...">
<hr>
<div class="item">Mario Rossi</div>
<div class="item">Gioacchino Rossini</div>
<div class="item">Rosario Fiorello</div>
</body>
</html>

La regola CSS "display:none" applicata a .item è opzionale.
Sarebbe meglio mostrare tutti i dati inizialmente e nascondere successivamente quelli non ricercati.

**fluxKami** · 28-02-2017, 17:33

Il codice funziona perfettamente, eccetto per un dettaglio: questo è ognuno dei miei .searchitem

Codice PHP:


echo "<li class='searchitem'><a href='http://www.axive.it/cliente.php?id=", $pcid , "'><span class='searchattribute'>", $pccf_piva, "</span>", $pccognome, " ", $pcnome, "</a></li>";

Quando scrivo qualcosa nell'input, tutto il dovuto subisce lo slideDown, ma lo slideUp non avviene come dovrebbe. Il motivo è sicuramente che il contenuto del mio "li" (che io, mi scuso, non ti avevo comunicato) contiene spazi.
Non so se per lo stesso motivo, quando cancello tutto il contenuto dell'input (tramite backspace), tutti i .searchitem hanno uno slideDown.

Scusa se ogni volta aggiungo una precisazione e ti costringo a sistemare quello che hai buttato giù, me ne accorgo soltanto nel momento in cui implemento le modifiche.
Ti sono comunque molto grato ed apprezzo molto l'aiuto che mi stai dando.

Discussione: Input Javascript Dinamico

Strumenti discussione

Ricerca discussione

Visualizza

Input Javascript Dinamico

Permessi di invio