Autocomplétion + résultats affichés = liens

Résolu
Ashgarn Messages postés 26 Statut Membre -  
Ashgarn Messages postés 26 Statut Membre -
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.
A voir également:

1 réponse

Réponse 1 / 1
jordane45 Messages postés 40050 Date d'inscription   Statut Modérateur Dernière intervention   4 759
 
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


0
Ashgarn Messages postés 26 Statut Membre
 
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>
0
jordane45 Messages postés 40050 Date d'inscription   Statut Modérateur Dernière intervention   4 759
 
Et donc ? Tu as utilisé la doc ?
https://projects.verou.me/awesomplete/

par exemple : 
$('#mylist').on('awesomplete-selectcomplete', function() {
      inputVal = $(this).val();
      alert(inputVal);
});
0
Ashgarn Messages postés 26 Statut Membre
 
Yes j'ai trouvé la solution, merci pour la doc que tu m'as passé :)
0

Discussions similaires

Fixer un résultat pour de bon à l'aide d'une fonction.
Bioforge -
Bioforge -

1 réponse
Retrouver liens copiés sur le téléphone
SAMA -
Peterson -

3 réponses
Ancien résultat du BAC
rodriguez73 -
Minere -

12 réponses
Copier un lien instagram
alaurore -
LEFEUVRE -

7 réponses
lien copié presse papier smartphone Samsung
luckygirl63 -
Pierr10 -

3 réponses