Para Desenvolvedores

Ferramenta de Autocompletação

Autocomplete Widget

Base URL
part of a human name
    "fullname":"Mary Anning",
    "fullname_reverse":"Anning, Mary",
    "lifespan":"(b. 1799-05-21 – d. 1847-03-09)",
    "description":"British fossil collector, dealer, and paleontol..."

A React.js widget or a Vue.js widget both based on Bootstrap styling could be modified to make use of the same Base URL in the jQuery example below.


Using typeahead.js, handlebars.js, and Bootstrap. A javascript callback entitled typeahead:select is fired when a user selects a name in the dropdown and the response produces either an ORCID ID or a Wikidata Q number.

// jQuery, typeahead.js and handlebars.js from a CDN
<script src="" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src=""></script>
<script src=""></script>

  $(function() {

    var collectors = new Bloodhound({
      datumTokenizer: Bloodhound.tokenizers.whitespace,
      queryTokenizer: Bloodhound.tokenizers.whitespace,
      sufficient: 10,
      remote: {
        url: '',
        wildcard: '%QUERY',
        transform : function(r) {
          return $.map(r, function (v) { v.type = "user"; return v; });

    $('#collector-search .typeahead').typeahead({
        minLength: 3,
        highlight: true
        name: 'user',
        limit: 10,
        source: collectors,
        display: 'fullname_reverse',
        templates: {
          suggestion: Handlebars.compile($("#result-template").html()),
          empty: Handlebars.compile($("#empty-template").html())
    ).on("typeahead:select", function(obj, datum) {
      var identifier = datum.orcid || datum.wikidata;
         The identifier will appear either in the form
         0000-0002-4286-147X or Q10293705.
         Recommended best practice is to show the user the identifier they
         chose by rendering an active link to either{{identifier}} or{{identifier}}
<div id="collector-search" class="m-2">
  <input class="typeahead" type="text" placeholder="Mary Anning" size="50">

<!-- Result template -->
<script id='result-template' type='text/x-handlebars-template'>
  <div class='d-flex'>
      <img class='rounded' src='{{thumbnail}}'>
    <div class='ml-2 flex-grow-1 small'>
      <h5 class='m-0 p-0'>{{fullname_reverse}}</h5>
      <div class='m-0 p-0 small muted'>{{{lifespan}}}</div>
      <div class='m-0 p-0 small muted'>{{{description}}}</div>

<!-- Non-result template -->
<script id='empty-template' type='text/x-handlebars-template'>
  <div class='m-2 tt-no-result'>Your search turned up 0 results.</div>
/* Bootstrap from a CDN */
<link rel="stylesheet" href="" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

/* Customizations */
  .twitter-typeahead { line-height:1em; }
  .typeahead, .tt-query, .tt-hint {
    width: 100%;
    height: 1rem;
    padding: 1rem;
    font-size: 1rem;
    line-height: 1rem;
    border: 2px solid #ccc;
    border-radius: 8px;
    outline: none;
.typeahead { background-color: #fff; width:300px; }
.typeahead:focus { border: 2px solid #40924F; }
.tt-query { box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); }
.tt-hint { color: #999; }
.tt-menu {
  width: 100%;
  margin: 5px 0;
  padding: 8px 0;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  box-shadow: 0 5px 10px rgba(0,0,0,.2);
  z-index:10000 !important;
.tt-suggestion, .tt-no-result {
  padding: 3px 10px;
  font-size: 1rem;
  line-height: 1.1rem;
.tt-suggestion:hover {
  cursor: pointer;
  color: #fff;
  background-color: #40924F;
} { color: #fff; background-color: #40924F; }
.tt-suggestion p { margin: 0; }
.tt-menu-header {
  margin: 0 10px 5px 10px;
  padding: 3px 0;
  border-bottom: 1px solid #a8a7a5;
  border-radius:0px !important;
  font-size:1rem !important;


Search for people is exposed as JSON-LD documents with Cross-Origin Resource Sharing (CORS) using elements from as type DataFeed, OpenSearch, and W3C ActivityStreams.

Base URL
single human name (required)
comma-separated list of taxonomic families collected (optional)
comma-separated list of taxonomic families identified (optional)
a date expressed as YYYY-MM-DD, YYYY-MM, or YYYY (optional)
page number; there is a fixed 30 items per page (optional)
boolean for MUST (=true) vs SHOULD (=false) on families_identified, families_collected, and date when any are present (optional)
A string to produce a JSONP response instead of a JSON-LD response (optional)
  "@context": {
    "@vocab": "",
    "opensearch": "",
    "as": ""
  "@type": "DataFeed",
  "opensearch:totalResults": 1,
  "opensearch:itemsPerPage": 1,
  "as:first": "",
  "as:prev": null,
  "as:current": "",
  "as:next": null,
  "as:last": "",
  "name": "Bionomia user search results",
  "description": "Bionomia user search results expressed as a JSON-LD DataFeed.
    q={name} is a search by human name;
    families_identified={families_identified} is a comma-separated list of taxonomic families identified;
    families_collected={families_collected} is a comma-separated list of taxonomic families collected;
    date={date} is a date in the form YYYY, YYYY-MM, or YYYY-MM-DD and is compared to birth and death dates;
    page={page} is the page number and there is a fixed 30 items per page;
    strict={true|false} is a boolean for MUST vs SHOULD on families_identified, families_collected, and date",
  "license": "",
  "potentialAction": {
    "@type": "SearchAction",
    "target": "{name}&families_identified={families_identified}&families_collected={families_collected}&date={date}&page={page}&strict={true|false}"
  "dataFeedElement": [
      "@type": "DataFeedItem",
      "item": {
        "@type": "Person",
        "@id": "",
        "name": "Andrew B.T. Smith",
        "givenName": "Andrew B.T.",
        "familyName": "Smith",
        "alternateName": [
          "Smith, Andrew B.T."
        "knowsAbout": [
            "@type": "ItemList",
            "name": "families_identified",
            "itemListElement": [
                "@type": "ListItem",
                "name": "Carabidae"
            "@type": "ItemList",
            "name": "families_collected",
            "itemListElement": [
                "@type": "ListItem",
                "name": "Scarabaeidae"
                "@type": "ListItem",
                "name": "Curculionidae"
        "sameAs": ""