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

Résolu

Ashgarn Messages postés 26 Statut Membre -
Ashgarn Messages postés 26 Statut Membre - 14 juin 2018 à 08:38

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.

Afficher la suite

A voir également:

Autocomplétion + résultats affichés = liens
Resultats foot - Télécharger - Vie quotidienne
Vérificateur de liens - Guide
Ou trouver les liens copiés sur android - Guide
Résultats bac 2025 - Guide
Telecharger liens direct - Accueil - Outils

1 réponse

jordane45 Messages postés 30427 Date d'inscription Statut Modérateur Dernière intervention 4 832

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

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>

jordane45 Messages postés 30427 Date d'inscription Statut Modérateur Dernière intervention 4 832
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

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

1 réponse

Discussions similaires

Newsletters