Résultat d'une recherche dans une fenêtre.

wofty · 1 Juin 2013

Bonjour,
j'ai récupérer ce code que j'ai trouvé à cette adresse : http://onwebdev.blogspot.com/2011/08/jquery-get-wikipedia-definition.html et qui donne le résultat suivant à cette adresse : http://dev.css-zibaldone.com/onwebdev/post/jquery-get-wikipedia-definition.html . J'aimerai l'adapter pour un projet perso en robotique. Le résultat de chaque recherche s'affiche à la suite.
Mais ce que je souhaite, c'est quelle s'affiche dans la même fenêtre. Qu'est ce je dois modifier à votre avis ?
Merci d'avance.

Code:

<!DOCTYPE html>
<!-- saved from url=(0079)http://dev.css-zibaldone.com/onwebdev/post/jquery-get-wikipedia-definition.html -->
<html><script type="text/javascript" src="chrome-extension://khbjahpecnkenngkidhioicnfpakihgo/iframe_raw.js"></script><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery: get a Wikipedia definition</title>
<meta charset="utf-8">
<style type="text/css">
body {
	margin: 2em;
	font: 100% Arial, sans-serif;
}
#search {
	margin: 0 auto;
	width: 50%;
}
input, label {
	font: 1em Arial, sans-serif;
	vertical-align: middle;
}
label {
	font-weight: bold;
	margin-right: 0.5em;
}
#d {
	border: 1px solid #999;
	width: 150px;
	background: #fff;
	margin-right: 0.5em;
}
#submit {
	background: #d34545;
	border: none;
	color: #fff;
	font-weight: bold;
	padding: 0.3em 1em;
}
div.def {
	width: 50%;
	padding: 1em;
	background: #f5f5f5;
	margin: 1em 0;
}
div.def h2 {
	font-size: 1.3em;
	font-weight: normal;
	text-transform: uppercase;
	margin: 0;
}
div.def p {
	line-height: 1.4;
	margin-top: 0;
	margin-bottom: 0.3em;
}
div.def div a {
	color: #d34545;
}
</style>
<style type="text/css"></style><script>window["_GOOG_TRANS_EXT_VER"] = "1";</script></head>
<body>
<form action="./wikipedia/get.php" method="get" id="search">
<div>
	<label for="d">Question :</label>
	<input type="text" name="d" id="d">
	<input type="submit" name="submit" id="submit" value="Rechercher Définition">
</div>
</form>
<script type="text/javascript" src="./wikipedia/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
  $('#search').submit(function(event) {
    var $form = $(this);
    var term = $('#d', $form).val();
    $.ajax({
      type: 'GET',
      dataType: 'json',
      url: $form.attr('action'),
      data: 'd=' + term,
      success: function(data) {
        var html = '';
        html += '<div class="def">';
        html += '<h2>' + data.term + '</h2>';
        html += '<p>' + data.desc + '</p>';
        html += '<div><a href="' + data.url + '">' + data.url + '</a></div>';
        html += '</div>';
        $(html).appendTo($form);
      }
    });
    event.preventDefault();
  });
});
</script>
</body></html>

FortTrafic · 1 Juin 2013

dans ta deuxieme url la recherche s'affiche bien dans la meme fenetre.

wofty · 2 Juin 2013

Bonjour, je grattouille depuis un moment ce code mais les résultats s'affichent toujours l'un en dessous de l'autre même si c'est visiblement dans la même fenêtre. Qu'est-ce qui coince pour qu'a chaque résultat l'ancien s’efface et affiche le nouveau ?
Merci

wofty · 2 Juin 2013

Trouvé !!! (merci au développeur du code :wink: ). Il suffit d'ajouter <div id="output"></div> ce qui donne :

Code:

<form action="./wikipedia/get.php" method="get" id="search">
<div>
   <label for="d">Question :</label>
   <input type="text" name="d" id="d">
   <input type="submit" name="submit" id="submit" value="Rechercher Définition">
</div>
<div id="output"></div>
</form>

et de modifier cette partie de javascript

Code:

$(html).appendTo($form);

par ceci

Code:

$('#output').empty();
$(html).appendTo('#output');

Il me reste encore à trouver comment ajouter un flux RSS au résultat de la réponse et de remplir le champ de recherche par l'URL.

Si quelqu'un a des pistes, je suis preneur. Mais là j'ai bien peur d'être un peu hors-sujet par rapport à ma question initial. :mrgreen: