Lien dans un input

Version imprimable

Lien dans un input

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:

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

09/08/2018, 18h49
Invité
Bonjour,

Citation:

...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:

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 ? :koi:
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.

:recherch: "javascript auto-complete"
09/08/2018, 18h58
apdf1

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
09/08/2018, 19h07
Invité

Dans la liste.

Re,

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

Code:

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

09/08/2018, 20h09
Invité

Normal.

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

Code:

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

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

Code:

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...

Citation:

Envoyé par jreaux62

Code:

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...

:salut:

Un autre exemple (seul Adele a un url) :

Code:

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:

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
});

09/08/2018, 21h39
Invité

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

Bonjour,

Citation:

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:

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"; } } }

10/08/2018, 15h30
Beginner.

Effectivement c'est bien vu.
10/08/2018, 16h03
Invité
+1 Idem ;) :hola:

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

VITE !! TROUVER une parade ou MIEUX :
Code:

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... :mouarf: )
10/08/2018, 16h24
Beginner.

Citation:

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
10/08/2018, 16h26
Invité

C'est fait ! ;) (oubli !)
10/08/2018, 16h28
Beginner.

Oui je m'en doutais...
10/08/2018, 16h30
Invité

cela dit...

Citation:

...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 !
10/08/2018, 17h46
Beginner.

Oui effectivement c'est un des intérêts de ce forum...
20/08/2018, 17h55
pterrat

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