Lien dans un input

**apdf1** · 09/08/2018, 18h41

Bonjour,

J'ai un code pour rechercher un nom dans une liste à l'aide d'un input, qui fonctionne très bien j'aimerai lui apporter une modification.
Suite à la recherche je voudrais cliquer sur lr nom pour ouvrir la page?

Mon code

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
 
<!DOCTYPE html>
<html>
<title>Recherche</title>
 
<body>
 
<div class="w3-container">
  <h2>Filtrer une Liste</h2>
  <p>Rechercher un nom dans le champ de saisie.</p>
 
  <input  type="text" placeholder="Chercher un noms..!" id="myInput" onkeyup="myFunction()">
 
  <ul  id="myUL">
    <li>Adele</li>
    <li>Agnes</li>
    <li>Bil</li>
    <li>Bob</li>
    <li>Calvin</li>
    <li>Christine</li>
    <li>Cindy</li>
	<li>Max</li>
	<li>Michelle</li>
	<li>Maurice</li>
	<li>Pierre</li>
	<li>louis</li>
  </ul>
</div>
 
<script>
function myFunction() {
    var input, filter, ul, li, a, i;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    ul = document.getElementById("myUL");
    li = ul.getElementsByTagName("li");
    for (i = 0; i < li.length; i++) {
        if (li[i].innerHTML.toUpperCase().indexOf(filter) > -1) {
            li[i].style.display = "";
        } else {
            li[i].style.display = "none";
        }
    }
}
</script>
 
</body>
</html>

Je vous remercie d'avance

max

Invité · 09/08/2018, 18h49

Bonjour,

...je voudrais cliquer sur le nom pour ouvrir la page?...

A mon avis, c'est dans ta liste qu'il faut mettre les liens, non ?

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<ul>
  <li><a href="...">Adele</a></li>
  <li><a href="...">Agnes</a></li>
...

Sinon, je ne vois pas...
Si : remplacer dynamiquement l'action du form ?

ou faire un window.location.href

Mais pour ça, il faut que les prénoms et les URL associés soient dans des array JavaScript, utilisables.

"javascript auto-complete"

**apdf1** · 09/08/2018, 18h58

Bonjour jreaux62,

Lorsque je recherche un nom, je rentre les premières lettres dans mon input il m'affiche la liste commençant par ces premières lettre et lorsque je trouve le nom approprier j'aimerais cliquer dessus pour ouvrir le lien.
Je voudrais savoir je doit mettre le lien dans le code javascript ou dans les <li> genre <li><a href="#">Adele</a></li>

Merci

Max

Invité · 09/08/2018, 19h07

Dans la liste.

**apdf1** · 09/08/2018, 19h14

Re,

je viens de m’apercevoir qu'il y a un problème, quand je fait ma liste avec mes lien comme ceci

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
  <ul  id="myUL">
    <li><a href="Adele.html">Adele</a></li>
    <li><a href="Agnes.html">Agnes</a></li>
    <li><a href="Billy.html">Billy</a></li>
    <li><a href="Bob.html">Bob</a></li>
    <li><a href="Calvin.html">Calvin</a></li>
    <li><a href="Christina.html">Christina</a></li>
    <li><a href="Cindy.html">Cindy</a></li>
   <li><a href="Max.html">Max</a></li>
   <li><a href="Michelle.html">Michelle</a></li>
   <li><a href="Maurice.html">Maurice</a></li>
  <li><a href="Pierre.html">Pierre</a></li>
  <li><a href="louis.html">louis</a></li>
  </ul>

La recherche ne se fait plus??

Max

Invité · 09/08/2018, 20h09

Normal.

Il faut accéder au contenu du <a>, enfant du <li> :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 if (li[i].childNodes[0].textContent.toUpperCase().indexOf(filter) > -1) {

**Beginner.** · 09/08/2018, 20h37

Salut,
Oui normal...
Sinon voici un exemple :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
function myFunction() {
 
            var filter = document.getElementById("myInput").value.toUpperCase();           
            var links =  document.querySelectorAll("#myUL a");
 
            for (var i = 0; i < links.length; i++) {
                if (links[i].textContent.toUpperCase().indexOf(filter) > -1) {
                    links[i].parentElement.style.display = "";
                } else {
                    links[i].parentElement.style.display = "none";
                }
            }
        }

Cela fonctionne chez moi...

Envoyé par jreaux62

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 if (li[i].childNodes[0].textContent.toUpperCase().indexOf(filter) > -1) {

Oui moi aussi j'utilise textContent à la place de innerHTML par contre j'utiliserais children plutôt que childNodes sinon dans certains cas ça pourrait ne pas fonctionner...

**danielhagnoul** · 09/08/2018, 21h16

Un autre exemple (seul Adele a un url) :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div class="w3-container">
    <h2>Filtrer une Liste</h2>
    <p>Rechercher un nom dans le champ de saisie.</p>
    <label>
        Un nom :
    </label>
    <input type="text" id="myInput">
 
    <ul id="myUL">
        <li data-url="https://www.google.com">Adele</li>
        <li>Agnes</li>
        <li>Bil</li>
        <li>Bob</li>
        <li>Calvin</li>
        <li>Christine</li>
        <li>Cindy</li>
        <li>Max</li>
        <li>Michelle</li>
        <li>Maurice</li>
        <li>Pierre</li>
        <li>louis</li>
    </ul>
</div>

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
const
    elemInput = document.querySelector('#myInput'),
    elemUL = document.querySelector('#myUL'),
    elemsLI = elemUL.querySelectorAll('li');
 
for (const elem of elemsLI) {
    elem.addEventListener('click', ev => {
        if (elem.dataset.url) {
            window.location.href = elem.dataset.url;
        }
    }, {
        capture: false,
        passive: true,
        once: false
    });
}
 
elemInput.addEventListener('keyup', ev => {
    let
        filter = elemInput.value.toUpperCase();
 
    for (const elem of elemsLI) {
        if (elem.innerHTML.toUpperCase().indexOf(filter) > -1) {
            elem.style.display = "";
        } else {
            elem.style.display = "none";
        }
    }
}, {
    capture: false,
    passive: true,
    once: false
});

Invité · 09/08/2018, 21h39

@danielhagnoul
OK, mais on perd la sémantique des liens <a>.
Pas top pour l'accessibilité.

**NoSmoking** · 10/08/2018, 14h15

Bonjour,

Envoyé par Beginner.

Oui moi aussi j'utilise textContent à la place de innerHTML par contre j'utiliserais children plutôt que childNodes sinon dans certains cas ça pourrait ne pas fonctionner...

l'utilisation de textContent directement sur le <li> rendra le même résultat, c'est le propre de textContent (le texte sans les balises pour faire simple).

En reprenant le code initial la boucle donne

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
  for (i = 0; i < li.length; i++) {
    if (li[i].textContent.toUpperCase().indexOf(filter) > -1) {
      li[i].style.display = "";
    }
    else {
      li[i].style.display = "none";
    }
  }
}

**Beginner.** · 10/08/2018, 15h30

Effectivement c'est bien vu.

Invité · 10/08/2018, 16h03

+1 Idem

(grrr... il faut qu'on TESTE TOUT !! TOUJOURS !! )

VITE !! TROUVER une parade ou MIEUX :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
  for (i = 0; i < li.length; i++) {
    li[i].style.display = (li[i].textContent.toUpperCase().indexOf(filter) > -1)? '' : 'none';
  }

(OUF : opérateur ternaire... )

**Beginner.** · 10/08/2018, 16h24

Envoyé par jreaux62

+1 Idem

Euh ben j'ai mis un +1 donc avec le tient ça devrait lui faire au moins 2 points mais j'en vois qu'un ? hihihi

Invité · 10/08/2018, 16h26

C'est fait !

(oubli !)

**Beginner.** · 10/08/2018, 16h28

Oui je m'en doutais...

Invité · 10/08/2018, 16h30

cela dit...

...j'utilise textContent à la place de innerHTML...

Je le conseille aussi... sur TES conseils (avisés et justes)

LOL : c'est tout l'intérêt de ce forum : ECHANGER !

**Beginner.** · 10/08/2018, 17h46

Oui effectivement c'est un des intérêts de ce forum...

**pterrat** · 20/08/2018, 17h55

Salut,

J'aimerai apporter une précision sur innerHTML et TextContent. Et proposer une alternative avec nodeValue

innerHTML

InnerHTML va te permettre de modifier comme son nom l'indique la structure HTML de tes noeuds.

textContent
Va permettre de modifier uniquement le contenu du texte de ton noeud.
L'avantage majeur est un gain de performance. Contrairement à innerHTML, ton HTML ne sera pas "analysé" ce qui fait gagner du temps.
A noter que tu peux utiliser également innerText.

nodeValue
Tu peux également utiliser nodeValue pour te permettre d'avoir beaucoup de flexibilité. Bon son utilisation est moins simple, mais ça en vaut la peine

.

Si tu veux aller plus loin :

innerHTML
textContent
innerText
nodeValue

Lien dans un input

JavaScript

Discussions similaires

Partager

Partager