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) - a custom search function that provides results in OpenSearch Suggest Format
    • query is the search string
    • The Promise that is returned by this function can optionally have a property cancel attached. If this is the case, it will be called if there is a newer search query and the previous request should be aborted.
  • placeholder - override default placeholder ("Type to search...")
    • null uses the default placeholder, providing an empty string clears it

Methods ​

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

Events ​

  • select
    • Emitted when a search result is selected (either via click or enter).
    • Parameter is the JSKOS concept of the selected result (with uri and inScheme properties).

Examples ​

Search with a custom search function ​

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

vue
<template>
  <item-suggest
    :search="searchPokemon" />
</template>

<script setup>
import { ItemSuggest } from "jskos-vue"
// Custom data and search function
const data = [
  { "id": 1, "name": "Bulbasaur" },
  { "id": 2, "name": "Ivysaur" },
  { "id": 3, "name": "Venusaur" },
  { "id": 4, "name": "Charmander" },
  { "id": 5, "name": "Charmeleon" },
  { "id": 6, "name": "Charizard" },
  { "id": 7, "name": "Squirtle" },
  { "id": 8, "name": "Wartortle" },
  { "id": 9, "name": "Blastoise" },
  { "id": 10, "name": "Caterpie" },
  { "id": 11, "name": "Metapod" },
  { "id": 12, "name": "Butterfree" },
  { "id": 13, "name": "Weedle" },
  { "id": 14, "name": "Kakuna" },
  { "id": 15, "name": "Beedrill" },
  { "id": 16, "name": "Pidgey" },
  { "id": 17, "name": "Pidgeotto" },
  { "id": 18, "name": "Pidgeot" },
  { "id": 19, "name": "Rattata" },
  { "id": 20, "name": "Raticate" },
]
const searchPokemon = async (query) => {
  query = query.toLowerCase()
  const results = data.filter(entry => entry.name.toLowerCase().includes(query))
  // Convert to OpenSearch Suggest Format
  const result = [query]
  result[1] = results.map(r => r.name)
  result[2] = results.map(() => "")
  result[3] = results.map(r => `pokemon:${r.id}`)
  return result
}
</script>

Search for concepts inside a concept scheme ​

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

vue
<template>
  <item-suggest
    :search="utils.cdkRegistryToSuggestFunction(registry, { 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 and the cdkRegistryToSuggestFunction helper to search for vocabularies.

vue
<template>
  <item-suggest
    :search="utils.cdkRegistryToSuggestFunction(bartocRegistry, { voc: true })" />
</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>