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) {

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

Lien dans un input

JavaScript

Vue hybride

Discussions similaires

Partager

Partager