Get started with at.js CDN

MIT licensed

At.js is a lightweight library for tracking website clicks and impressions.

Tags:
  • mention
  • mentions
  • autocomplete
  • autocompletion
  • autosuggest
  • autosuggestion
  • atjs
  • at.js

Stable version

Copied!

How to start using at.js CDN


<!DOCTYPE html>
<html>
<head>
  <title>Get started with at.js CDN - cdnhub.io</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.2/css/bootstrap.min.css">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdn.cdnhub.io/at.js/1.5.4/js/jquery.atwho.min.js"></script>
  <script>
    $(document).ready(function() {
      $('#search').atwho({
        data: [
          { value: 'John Doe', suggestion: 'John Doe <[email protected]>' },
          { value: 'Jane Doe', suggestion: 'Jane Doe <[email protected]>' },
          { value: 'Bob Smith', suggestion: 'Bob Smith <[email protected]>' },
        ],
        template: '<div class="template"><div class="name">{{name}}</div><div class="email">{{suggestion}}</div></div>',
        displayTemplate: function(item) {
          return '<div class="atwho-result"><div class="atwho-result-name">' + item.name + '</div><div class="atwho-result-email">' + item.suggestion + '</div></div>';
        },
        onSelect: function(item) {
          $('#search').val(item.suggestion);
        },
      });
    });
  </script>
  <style>
    .atwho-container {
      width: 300px;
    }
    .atwho-result {
      padding: 5px;
      cursor: pointer;
    }
    .atwho-result:hover {
      background-color: #f5f5f5;
    }
  </style>
</head>
<body>
  <div class="container">
    <input type="text" id="search" class="form-control" placeholder="Search for an email address...">
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.2/js/bootstrap.min.js"></script>
</body>
</html>
Copied!
Copied!
Copied!
Copied!

All versions