Autocomplétion + résultats affichés = liens [Résolu] - Javascript

Autocomplétion + résultats affichés = liens Comment afficher le résultat des liens <a> dans un bloc CSS » Forum - CSS Recherche par mots clé affichant lien de site internet (Résolu) » Forum - Excel 3 listes déroulantes php sql envoi resultat vers lien html (Résolu) » Forum - PHP Afficher lien uniquement si session ouverte (Résolu) » Forum - Programmation Modifier le résultat affiché par une commande » Forum - Shell

Bonjour, j'ai déjà un formulaire avec autocomplétion, et j'aimerais savoir s'il est possible, quand on clique sur un des résultats qui apparaît grâce à l'autocomplétion, que cela nous envoie vers la page concerné. En gros faire des résultats des liens cliquables. C'est peut-être avec onClick en JS mais je ne sais pas trop.
Merci de vos réponses.

Forum

Autocomplétion + résultats affichés = liens Comment afficher le résultat des liens <a> dans un bloc CSS » Forum - CSS Recherche par mots clé affichant lien de site internet (Résolu) » Forum - Excel 3 listes déroulantes php sql envoi resultat vers lien html (Résolu) » Forum - PHP Afficher lien uniquement si session ouverte (Résolu) » Forum - Programmation Modifier le résultat affiché par une commande » Forum - Shell

Web: www.shapebootstrap.net

4 réponses

Marsh

NOVEMBER 9, 2013 AT 9:15 PM

Bonjour,

Il faudrait déjà nous montrer comment tu as codé ton autocomplete.
Sachant que dans la majorité des cas, les autocomplete disposent d'une méthode "select" (ou onselect )
Et c'est donc dedans que tu dois procéder à ta redirection...
Par exemple :
https://api.jqueryui.com/autocomplete/#event-select


Reply
réponses:
  • Ashgarn

    Bonjour, désolé de répondre tard, voici mon code :

     <input class="awesomplete" list="mylist" placeholder="Recherche" /> 	<datalist id="mylist"> 	<option>phpMyAdmin</option> 	<option>Zabbix</option> 	<option>OVH</option> 	<option>Adselfservice</option> 	<option>Centre d'administration Exchange</option> 	<option>OMIV Dell</option> 	<option>EMC Secure Remote Services</option> 	</datalist> 


    Et le CSS correspondant :

     .awesomplete > ul { 	border-radius: .3em; 	width: 8em; 	margin: .2em 0 0; 	background: hsla(0,0%,100%,.9); 	background: linear-gradient(to bottom right, white, hsla(0,0%,100%,.8)); 	border: 1px solid rgba(0,0,0,.3); 	box-shadow: .05em .2em .6em rgba(0,0,0,.2); 	text-shadow: none; 	overflow: auto; }  @supports (transform: scale(0)) { 	.awesomplete > ul { 		transition: .3s cubic-bezier(.4,.2,.5,1.4); 		transform-origin: 1.43em -.43em; 	} 	 	.awesomplete > ul[hidden], 	.awesomplete > ul:empty { 		opacity: 0; 		transform: scale(0); 		display: block; 		transition-timing-function: ease; 	} }  	.awesomplete > ul:before { 		content: ""; 		position: absolute; 		top: -.43em; 		left: 1em; 		width: 0; height: 0; 		padding: .4em; 		background: white; 		border: inherit; 		border-right: 0; 		border-bottom: 0; 		-webkit-transform: rotate(45deg); 		transform: rotate(45deg); 	}  	.awesomplete > ul > li { 		position: relative; 		padding: .2em .2em; 		cursor: pointer; 	} 	 	.awesomplete > ul > li:hover { 		background: #B8D3E0;	/* quand on survole les résultats */ 		color: black; 	} 	 	.awesomplete > ul > li[aria-selected="true"] { 		background: #3D6D8F; 		color: white; 	} 	 		.awesomplete mark { 			background: #EAFF00;	/* surlignage des résultats */ 		} 		 		.awesomplete li:hover mark { 			background: #B5D100;	/* surlignage des résultats survolés */ 		} 		 		.awesomplete li[aria-selected="true"] mark { 			background: #3D6B00; 			color: inherit; 		} 


    Après j'ai aussi chopé ça que j'ai mis dans le HTML, j'ai cherché un peu sur Internet et j'ai trouvé des widgets d’auto-complétion :
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/awesomplete/1.1.1/awesomplete.min.js"></script> 

  • jordane45

    Et donc ? Tu as utilisé la doc ?
    https://leaverou.github.io/awesomplete/

    par exemple :

     $('#mylist').on('awesomplete-selectcomplete', function() {       inputVal = $(this).val();       alert(inputVal); }); 

  • Ashgarn

    Yes j'ai trouvé la solution, merci pour la doc que tu m'as passé :)

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed