Select2 and RDF relationships

by Ted Lawless

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<link rel="stylesheet" href="//getbootstrap.com/2.3.2/assets/css/bootstrap.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.css">
<div id="profile-manager" data-subject="data:jsmith">
  <h5><small>Select2 tagging widget for adding and remove relationships to skos:Concepts</small></h5>
  <h2>John Smith - researcher</h2>

  <h5>Research areas</h5>

  <div id="research-area" class="multi-tag" data-predicate="vivo:hasResearchArea" />
</div>
<hr/>
<div id="output">
  <h6>Log of changes</h6>

  <table>
    <tr>
      <th>Subject</th>
      <th>Predicate</th>
      <th>Object</th>
      <th>Action</th>
    </tr>
  </table>
</div>

CSS

#profile-manager {
  width: 90%;
  margin-right: auto;
  margin-left: auto;
}

.multi-tag {
  width: 75%;
  font-size: 1.25em;
}

table {
  border-collapse: collapse;
  margin-top: 0;
  padding-top: 0;
}

table,
td,
th {
  border: 1px solid grey;
}

th,
td {
  min-width: 6em;
}

td {
  padding: 1em;
}

JavaScript

jQuery(document).ready(function($) {
  $('#research-area').select2({
    minimumInputLength: 3,
    placeholder: 'Enter a term',
    multiple: true,
    create: true,
    ajax: {
      url: "https://fast.oclc.org/searchfast/fastsuggest",
      dataType: 'jsonp',
      quietMillis: 100,
      data: function(term, page) {
        return {
          queryIndex: "suggest50",
          rows: 10,
          suggest: "autoSubject",
          queryReturn: "idroot,auth,type,suggest50",
          query: term
        };
      },
      results: function(data, page) {
        if (data.response.numFound === 0) {
          return [{}];
        } else {
          return {
            results: prepResult(data.response.docs)
          };
        }
      }
    },
    initSelection: function(element, callback) {
      var label = $(element).data('value');
      var uri = $(element).data('object');
      var data = [{
        id: uri,
        text: label
      }];
      callback(data);
      //callback({"term": $(elment).data('value')});
    },
    createSearchChoice: function(item, data) {
      return;
    },
    dropdownCssClass: "bigdrop",
    tokenSeparators: [",", "|"]
  });
  $('#research-area').select2('data', getInitialData() || []);
  $('#research-area').on("change", function(e) {
    var subject = $(this).parent().data('subject');
    var changeSet = {};
    changeSet.subject = subject;
    changeSet.predicate = $(this).data('predicate');
    if (e.added !== undefined) {
      changeSet.object = fastURI(e.added.id);
      console.debug("Add");
      console.debug(changeSet);
      logChange(changeSet, 'added');
    }

    if (e.removed !== undefined) {
      changeSet.object = fastURI(e.removed.id);
      console.debug("Remove");
      console.debug(changeSet);
      logChange(changeSet, 'removed');
    }
  });
});

function prepResult(docs) {
  return _.map(docs, function(d) {
    return {
      'id': d.idroot,
      'text': d.suggest50[0]
    };
  });
}

function...