Barre de recherche avec ID du sujet

2 participants

Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Barre de recherche avec ID du sujet

Message par Mat Sam 1 Aoû 2020 - 18:54

Bonsoir, Visage souriant

Dans le cadre d'un projet, je souhaiterais créer une page HTML avec pour seul contenu une barre de recherche qui, en entrant l'ID d'un sujet, nous redirigerait sur celui-ci.
Je n'arrive malheureusement pas à réaliser ceci mais je suppose qu'il faudrait que l'ID entré dans la barre s'ajoute entre le /t et le - qui correspond à n'importe quel sujet.

Merci pour votre aide ^^
Mat

Mat
Membre habitué

Masculin
Messages : 1555
Inscrit(e) le : 05/09/2015

http://www.dixily.fr
Mat a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de recherche avec ID du sujet

Message par Mat Dim 2 Aoû 2020 - 19:13

Et un up Visage souriant
Mat

Mat
Membre habitué

Masculin
Messages : 1555
Inscrit(e) le : 05/09/2015

http://www.dixily.fr
Mat a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de recherche avec ID du sujet

Message par Invité Lun 3 Aoû 2020 - 8:51

Hello Mat,
alors c'est assez complexe de lancer une recherche avec comme seule valeur l'id du sujet car il faudrait rechercher sur l'ensemble du forum touts les sujets est pratiquement impossible (pour récupérer le titre et le lien dans sa totalité).

Par contre en se servant de:
Code:
/t+ l 'id du sujet+ le tiret

On obtient ce que tu souhaites,
J'ai créé une page HTML:(Merci Arnaud pour la correction Wink ).

Le fonctionnement est assez sommaire mais fonctionnel.

Cette page HTML sans haut de page va rechercher le texte, le lien , l'auteur du sujet et dans quel forum:
Au clic , tu arriveras sur le premier message du sujet.
Un message "Aucun sujet trouvé" fera sont apparition un court instant si le lien est valide,
dans le cas contraire, ce dernier restera.

Modules/HTML & JAVASCRIPT/Gestion des pages HTML/Création en mode avancé (HTML)

Titre * : Mettre un titre
Voulez-vous utiliser le haut et le bas de page de votre forum ? Cocher Non

Déposes ceci:


Code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Page de recherche de sujet par ID</title>  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

    <style type="text/css">
body
{
background:#333333;      
}
#M14_seach_topic
{
margin-top:60px;
height:auto;
width:80%;
margin-left:10%;
border:2px solid #333;
padding: 10px;
}
.Reset{display:none;text-align:center;padding:2px;cursor:pointer;margin-top:30px;height:20px;line-height:20px;background-color:white;color:darkred;width: 15%;border-radius: 6px;}
.Import_liste{margin-top:30px;height:40px;line-height:40px;background-color:white;color:green;padding: 0px 5px 5px 20px;}
.Import_liste a[href^="/t"] {color:darkgreen !important;text-decoration:none;}
.M14_go{color:green;cursor:pointer;}
.M14_recherche_titre
{
position:fixed;
height:40px;
line-height:40px;
top:0px;
right:0px;
left:0px;
text-align:center;
background-color:white;
color:#666666;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
.M14_author{float:right;color:green;margin-right:30px;}
.M14_erreur{color:darkred;font-weight:bold;}
.M14_titre_span{margin-left:10px;}
.M14_titre_span span{color:darkred;}
 
 
    </style>
 
  </head>

      <body><div class="M14_recherche_titre">Barre de recherche de sujet avec son ID <span class="M14_titre_span">:<span></span></span></div>
 <form id="M14_seach_topic"class="color-secondary">
  <div class="Reset">Effacer la recherche</div> <br />
<input id="M14_search_input" type="number" min="1" value="" placeholder=" Numéro du sujet" required />
  <input class="M14_go" type="submit" value="Lancer la recherche" title="Lancer la recherche"/>
<br />
 
  <div class="Import_liste">Aucune recherche actuellement</div>
   <br /> <br />
    
<script type="text/javascript">
$(function(){
$('form[id="M14_seach_topic"]').on('submit',function(ev){ev.preventDefault();
var value=$('input[id="M14_search_input"]').val();
var a="/t";
var b="-";
var result=a+value+b;
if (value.value!= '')
{
$('.M14_titre_span span').text(' ( '+value+' )');  
$('.Reset').show();
$.get(result , function(data){
     $(data).find('main[id="topic"]').each(function(){    
 
     var href=$(this).find('.post-heading-wrap:first a[href^="/t"]').attr('href');
     var texte=$(this).find('.post-heading-wrap:first a[href^="/t"]').text();
     var auteur=$(this).find('.post-author-name:first a[href^="/u"]').text();
     var fofo=$(this).find('div[id="breadcrumbs"]').find('a.nav:last[href^="/f"]').text();
 

$('.Import_liste').html('<a href="'+href+'" target="_blank">'+texte+'</a> <span class="M14_author">Posté par   '+auteur+' dans le forum: '+fofo+'</span>');

});});
  $('.Import_liste').html('<span class="M14_erreur">Aucun sujet trouvé</span>');
}
});
$('.Reset').click(function(){
$(this).hide();
$('.M14_titre_span span').text('');
$('.Import_liste').html('Nouvelle recherche');
$('input[id="M14_search_input"]').val('');
  });
});
</script>
      </body>

</html>

Et voilou.
Edit, on peut même importer, le premier contenu du message  Wink .


a++
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de recherche avec ID du sujet

Message par Mat Jeu 6 Aoû 2020 - 21:42

Bonsoir Milouze,

A la base, j'avais en tête comme idée de bêtement rediriger vers le sujet en question mais ce que tu as réalisé est mieux au final Visage souriant
Je viens de tester et ça à l'air de fonctionner. Je vais m'occuper du CSS et je reviens ici si besoin ^^

Un grand merci Milouze Visage souriant
Mat

Mat
Membre habitué

Masculin
Messages : 1555
Inscrit(e) le : 05/09/2015

http://www.dixily.fr
Mat a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de recherche avec ID du sujet

Message par Invité Ven 7 Aoû 2020 - 4:39

Hello Mat,
de rien cher ami.
En cas ou tu désirerais avoir avoir le contenu du premier message:
La C.S.S ( qui j'avoue est très très basique voir même moche Sourire2 )
est commentée si besoin.


Code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Page de recherche de sujet par ID</title> 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

    <style type="text/css">
/*LA COULEUR DE FOND DE PAGE*/
body{background:#333333;}
      /*LE BLOC DE RECHERCHE*/     
#M14_seach_topic
{
margin-top:60px;
height:auto;
width:80%;
margin-left:10%;
border:2px solid #333;
padding: 10px;
}
/* ON DONNE UNE OPACITY A ZERO POUR LES ELEMENTS NON ESSENTIELS*/
.Reset,.Import_message_apercu,.Import_message
{opacity:0;transition: opacity 0.5s ease-in;} 
/*LE BOUTON EFFACER LA RECHERCHE*/   
.Reset{text-align:center;padding:2px;cursor:pointer;margin-top:30px;height:20px;line-height:20px;background-color:white;color:darkred;width: 15%;border-radius: 6px;}
/*LA ZONE QUI RECOIT LE SUJET*/     
.Import_liste{margin-top:30px;height:40px;line-height:40px;background-color:white;color:green;padding: 0px 5px 5px 20px;}
/*LE LIEN DE LA ZONE QUI RECOIT LE SUJET*/   
.Import_liste a[href^="/t"] {color:darkgreen !important;text-decoration:none;}
/*LA ZONE QUI RECOIT LE MESSAGE*/   
.Import_message{border:2px solid #333333;min-height:40px;max-height:350px;overflow-y:auto;background-color:white;color:black;padding: 5px 5px 5px 20px;}
/*LA ZONE DE L APERCU*/
.Import_message_apercu{color:white;text-align:center;height:40px;line-height:40px;}
/*LE BOUTON LANCER LA RECHERCHE*/
.M14_go{color:green;cursor:pointer;}
/*LA ZONE EN HAUT DE PAGE*/     
.M14_recherche_titre
{
position:fixed;
height:40px;
line-height:40px;
top:0px;
right:0px;
left:0px;
text-align:center;
background-color:white;
color:#666666;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
.M14_titre_span{margin-left:10px;}
.M14_titre_span span{color:darkred;font-weight:bold;}
 
      /*L AUTEUR DU SUJET*/     
.M14_author{float:right;color:green;margin-right:30px;}
      /*LA PAGE D ERREUR*/
.M14_erreur{color:darkred;font-weight:bold;}

 
 
    </style>
 
  </head>

  <body>
<div class="M14_recherche_titre">Barre de recherche de sujet avec son ID :<span class="M14_titre_span"><span></span></span></div>
<form id="M14_seach_topic"class="color-secondary">
<div class="Reset">Effacer la recherche</div> <br />
<input id="M14_search_input" type="number" min="1" value="" placeholder=" Numéro du sujet" required />
<input class="M14_go" type="submit" value="Lancer la recherche" title="Lancer la recherche"/>
<br />
<div class="Import_liste">Zone de recherche...</div>
<br /> <br />
<div class="Import_message_apercu">Aperçu du sujet:<span></span></div>
<div class="Import_message"></div>
<script type="text/javascript">
$(function(){
$('form[id="M14_seach_topic"]').on('submit',function(ev){ev.preventDefault();
var value=$('input[id="M14_search_input"]').val();
var a="/t";
var b="-";
var result=a+value+b;
if (value.value!= '')
{
$('.M14_titre_span span').text(value); 
$('.Reset').css('opacity','1');
$.get(result , function(data){
    $(data).find('main[id="topic"]').each(function(){   
    var href=$(this).find('.post-heading-wrap:first a[href^="/t"]').attr('href');
    var texte=$(this).find('.post-heading-wrap:first a[href^="/t"]').text();
    var auteur=$(this).find('.post-author-name:first a[href^="/u"]').text();
    var fofo=$(this).find('div[id="breadcrumbs"]').find('a.nav:last[href^="/f"]').text();
    var message=$(this).find('div.post-content:first').html();
$('.Import_liste').html('<a href="'+href+'" target="_blank">'+texte+'</a> <span class="M14_author">Posté par  '+auteur+' dans le forum: '+fofo+'</span>');
$('.Import_message_titre').fadeIn().find('span').text(texte);
$('.Import_message_apercu').css('opacity','1'); 
$('.Import_message').css('opacity','1').html(''+message+'<br /><br />');

});
});

$('.Import_liste').html('<span class="M14_erreur">Aucun sujet trouvé!!!</span>'); 
var o=$('.M14_erreur').length;if(o){$('div[class^="Import_message"]').css('opacity','0');}
}
});
$('.Reset').click(function(){
$(this).css('opacity','0');
$('.M14_recherche_titre i').text('');
$('.Import_message_apercu').css('opacity','0'); 
$('.M14_titre_span span').text('');
$('.Import_message').css('opacity','0')
$('.Import_liste').html('Nouvelle recherche');
$('input[id="M14_search_input"]').val('');
  });

});
</script>
</body>

</html>

Pour information, je serais absent jusqu'à Dimanche.


a++
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de recherche avec ID du sujet

Message par Chacha Mer 12 Aoû 2020 - 9:22

Barre de recherche avec ID du sujet UmaslZ4Bonjour,

Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message.

Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »
Chacha

Chacha
Modéractif
Modéractif

Masculin
Messages : 69477
Inscrit(e) le : 21/08/2010

https://forum.forumactif.com/
Chacha a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de recherche avec ID du sujet

Message par Mat Mer 12 Aoû 2020 - 13:30

Hey ^^

Je suis toujours entrain de refaire le CSS mais pour l'instant je n'ai pas eu le temps de finir ^^
Ce sujet n'est donc pas encore résolu Visage souriant
Mat

Mat
Membre habitué

Masculin
Messages : 1555
Inscrit(e) le : 05/09/2015

http://www.dixily.fr
Mat a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de recherche avec ID du sujet

Message par Mat Dim 16 Aoû 2020 - 11:21

Bonjour,

Je n'arrive pas à appliquer le CSS que je voudrais sur ce bouton :
Barre de recherche avec ID du sujet Bouton10

Code:
.M14_go {
    background-color: #d12e2e;
    border-radius: 8px;
    box-shadow: none;
    color: #fff!important;
    display: inline-block;
    font-family: Roboto, sans-serif;
    font-size: 1.2rem;
    font-weight: 500;
    overflow: hidden;
    padding: 9px 18px;
    position: relative;
    text-decoration: none;
    vertical-align: middle;
    width: auto!important;
    margin: 5px 2px 5px 2px;
}

Le bouton garde certaines propriétés graphique qu'il avait de base.
Barre de recherche avec ID du sujet Bouton11
Mat

Mat
Membre habitué

Masculin
Messages : 1555
Inscrit(e) le : 05/09/2015

http://www.dixily.fr
Mat a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de recherche avec ID du sujet

Message par Invité Dim 16 Aoû 2020 - 18:09

Hello Mat,
tu peux me donner le lien de ta page sous balises hide stp:

a++
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de recherche avec ID du sujet

Message par Mat Dim 16 Aoû 2020 - 18:14

Bonjour Milouze,

Voici :
Mat

Mat
Membre habitué

Masculin
Messages : 1555
Inscrit(e) le : 05/09/2015

http://www.dixily.fr
Mat a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de recherche avec ID du sujet

Message par Invité Dim 16 Aoû 2020 - 18:16

Re,
merci et tu veux quoi d'autres stp?

Si c'est la bordure, ajoutes ce style:
Code:
border: none !important;

a++
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Barre de recherche avec ID du sujet

Message par Mat Dim 16 Aoû 2020 - 18:42

Merci Milouze, je n'avais pas pensé à ajouter cette propriété (!important).
Je pense que c'est bon, pour le reste je pense pouvoir me débrouiller (je pensais avoir plus difficile que ça Visage souriant)
Merci à toi pour ton aide ^^
Mat

Mat
Membre habitué

Masculin
Messages : 1555
Inscrit(e) le : 05/09/2015

http://www.dixily.fr
Mat a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de recherche avec ID du sujet

Message par Invité Dim 16 Aoû 2020 - 18:47

De rien Mat Wink .

a++
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum