jskos-vue

ItemSuggest ​

Input field to search and select an item (usually concept or concept scheme) from a list of search results. Shows a LoadingIndicator while waiting for results.

Props ​

  • search(query) async function — custom search function that provides results in OpenSearch Suggest Format:
    • query is the search string
  • options array, default null — local JSKOS items to search if search is not set.
  • minChars number, default 1 — minimum query length for local options.
  • placeholder string, default "Type to search..." — placeholder string. null uses the default placeholder, an empty string clears it.

If both search and options are set, search is used.

Methods ​

  • focus() — focuses the input field
  • setQuery(newQuery, focus = false) — sets the query (input field) to newQuery; optionally focuses the input field

Events ​

  • select is emitted when a search result is selected (either via click or enter). Parameter is an object with property uri.

CSS classes ​

  • .jskos-vue-itemSuggest — the component element
  • .jskos-vue-itemSuggest-loading —
  • .jskos-vue-itemSuggest-results —
  • .jskos-vue-itemSuggest-results-item —
  • .jskos-vue-itemSuggest-results-list —
  • .jskos-vue-itemSuggest-selected —

Examples ​

Search with a custom search function ​

This example provides a custom search function (results come from local data in this case).

Search local options ​

vue
<item-suggest :options="languageOptions" />

Search for concepts inside a concept scheme ​

This example uses the coli-conc API via cocoda-sdk to search for concepts inside the German Dewey Decimal Classification (DDC, licensed by OCLC under CC BY-NC-ND 3.0).

vue
<template>
  <item-suggest
    :search="search => registry.suggest({ search, scheme })" />
</template>

<script setup>
import { ItemSuggest, utils } from "jskos-vue"
import * as cdk from "cocoda-sdk"
import { ref, onMounted } from "vue"

const registry = ref(null)
onMounted(() => {
  registry.value = cdk.initializeRegistry({
    provider: "ConceptApi",
    api: "https://coli-conc.gbv.de/api/",
  })
})

const scheme = {
  uri: "http://dewey.info/scheme/edition/e23/",
  license: [
    {
      uri: "http://creativecommons.org/licenses/by-nc-nd/3.0/"
    }
  ],
}
</script>

Search for schemes in BARTOC ​

This example uses the BARTOC API via cocoda-sdk to search for vocabularies.

vue
<template>
  <item-suggest :search="search => bartocRegistry.vocSuggest({ search })" />
</template>

<script setup>
import { ItemSuggest, utils } from "jskos-vue"
import * as cdk from "cocoda-sdk"
import { ref, onMounted } from "vue"

const bartocRegistry = ref(null)
onMounted(() => {
  bartocRegistry.value = cdk.initializeRegistry({
    provider: "ConceptApi",
    api: "https://bartoc.org/api/",
  })
})
</script>