Affichage formulaire

Bonjour,
Je suis en train d'intégrer un moteur de recherche à mon site et pour des problèmes de temps de réponse je dois travailler en javascript que je ne connais absolument pas.

Je me suis fait aidé par quelqu'un qui m'a fait un bout de code en javascript mais ce quelqu'un n'a pas fini le boulot et il ne peux plus rien faire avant plusieurs semaines (accident) et mon moteur de recherche doit être opérationnel sous 48 à 72 heures.

Pour l'instant, lorsque je teste le code j'ai un retour très rapide mais :
- si j'ai cliqué sur le bouton RECHERCHER du formulaire : je change de page (INCORRECT)
- si j'ai cliqué dans la zone de saisie : je reste sur la page (CORRECT)
En effet, il faut qu'après avoir cliqué sur le bouton RECHERCHER les résultats s'affichent dans la page comme lorsque je fais un click dans la zone de saisie

Je m'adresse donc à vous pour m'aider à résoudre ce problème.Vous trouverez ci-après le code fourni et quelques info complémentaires.
Merci d'avance à celui ou celle qui pourra m'aider

<script type="text/javascript" src="jquery.3.1.1.js"></script>
<style>
form.ajax p{
    margin:20px 0;
    text-align:center;
}
form.ajax label{
    font-size:16px;
    font-weight:bold;
    padding:3px;
}
form.ajax label span{
    font-size:16px;
    color:#777;
}
form.ajax input{
    width:99%;
    padding:3px;
    border:2px solid #aaa;
    -moz-border-radius:7px;
    -webkit-border-radius:7px;
    border-radius:7px;
    height:40px;
    line-height:40px;
}
.zone_saisie{
    font-size:20px;  
}
#ajax-loader{
    margin:15px auto 0 auto;
    display:block;
}
div.article-result{
    padding:2px 10px 10px 10px;
    margin-bottom:10px;
    border-bottom:1px solid #ccc;
}
div.article-result p.url{
    color:#777;
}
</style>
 
<script type="text/javascript">
 
$(document).ready( function() {
  $('#q').click(function() {
    $field = $(this);
    $('#results').html(''); // on vide les resultats
    $('#ajax-loader').remove(); // on retire le loader
 
    // on commence à traiter à partir du 3ème caractère saisi
    if( $field.val().length > 2 )
    { $.ajax( {
    type : 'GET', url : 'pr007_test.php' , data : 'q='+$(this).val() , beforeSend : function() {
    $field.after('<img src="ajax-loader.gif" alt="loader" id="ajax-loader" />');
    },
    success : function(data){ // traitements JS à faire APRES le retour d'ajax-search.php
        $('#ajax-loader').remove(); // on enleve le loader
        $('#results').html(data); // affichage des résultats dans le bloc
    }
    });
    } 
  });
});
 
 
</script>
 
<script>
#ajax-loader{
    margin:15px auto 0 auto;
    display:block;
}
div.article-result p.url{
    color:#777;
}
</script>
 
<div style="margin-top:20px; min-height:100px; width:100%; ">
 
<form action="pr007_test.php"  method="get">  
 
<div>
 
<input type="text" style="float:left; width:60%; margin:20px; background-color:#ffffff; -moz-border-radius:7px; -webkit-border-radius:7px; border-radius:7px; height:50px; line-height:30px; font-size:20px;" name="q" id="q" placeholder="nom, catégorie, ville, mot-clé..."  />
 
<input type="submit" value = "RECHERCHER" style="margin-left:10px; margin-top:20px; background-color:#89cf34; height:50px; font-size:20px; line-height:30px;">
 
 
</div>  
 
</form>
 
<div id="results" style="background-color:#ffffff;"></div>
 
</div>
Pour info, le script pr007_test.php (appelé dans la fonction javascript et dans le formu

La fin de mon message qui avait disparu

Pour info, le script pr007_test.php (appelé dans la fonction javascript et dans le formualire) est un script qui fonctionne très bien. C'est un simple SELECT sur la table concernée avec une clause WHERE qui compare (avec LIKE) un champs de ma table avec ce qui a été saisi dans le formulaire (valeur = q) et qui est passé en POST

PS : Si vous voyez des incohérences dans ce script et qu'il y a moyen de "l'alléger" c'est avec plaisir que je suivrai vos conseils.