Skip to content

Instantly share code, notes, and snippets.

@celsowm

celsowm/index.htm

Created May 5, 2025 01:52
Show Gist options
  • Save celsowm/2881b2a47a1b2df82f64e1636633f28d to your computer and use it in GitHub Desktop.
Save celsowm/2881b2a47a1b2df82f64e1636633f28d to your computer and use it in GitHub Desktop.
Download ZIP
tributejs example
Raw
index.htm
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Exemplo Tribute.js Autocomplete @mentions</title>
<!-- Tribute.js CSS -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/tributejs/5.1.3/tribute.css"
>
</head>
<body>
<h3>Digite @ para ver as sugestões:</h3>
<textarea id="my-textarea" rows="5" cols="40" placeholder="Escreva algo..."></textarea>
<!-- Tribute.js JavaScript -->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/tributejs/5.1.3/tribute.min.js"
></script>
<script>
// Inicializa o Tribute.js com uma lista mock de menções
var tribute = new Tribute({
trigger: '@',
values: [
{ key: 'Alice', value: 'alice' },
{ key: 'Bob', value: 'bob' },
{ key: 'Carol', value: 'carol' },
{ key: 'Dave', value: 'dave' }
],
selectTemplate: function (item) {
return '@' + item.original.value;
}
});
// Anexa o Tribute ao textarea
tribute.attach(document.getElementById('my-textarea'));
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment