diff --git a/resource/css/skosmos.css b/resource/css/skosmos.css
index c510225f7..d2e76eda1 100644
--- a/resource/css/skosmos.css
+++ b/resource/css/skosmos.css
@@ -232,7 +232,7 @@ body {
     height: 100%;
   }
 
-  #headerbar .dropdown-toggle {
+  #search-wrapper .dropdown-toggle {
     background-color: var(--search-bg);
     color: var(--headerbar-text-2);
     border: 1px solid var(--search-border);
@@ -241,51 +241,92 @@ body {
     padding-right: 0.5rem;
   }
 
-  #headerbar .dropdown-toggle:hover, #headerbar .dropdown-toggle:active {
+  #search-wrapper .dropdown-toggle:hover, #search-wrapper .dropdown-toggle:active {
     background-color: var(--search-dropdown-toggle-hover); /* What color to use? */
   }
 
-  #headerbar .dropdown-toggle.show {
+  #search-wrapper .dropdown-toggle.show {
     background-color: var(--search-dropdown-toggle-show); /* What color to use? */
   }
 
-  #headerbar .dropdown-menu {
+  #search-wrapper .dropdown-menu {
     border: 1px solid var(--search-border);
     border-radius: 0;
+    padding: 0;
+    width: 114%;
+    max-height: 20rem;
+    overflow: auto;
   }
 
-  #headerbar .dropdown-item:active {
+  #search-wrapper .dropdown-item:active {
     background-color: var(--search-dropdown-item-active);
   }
 
-  #headerbar .dropdown-item:hover {
+  #search-wrapper .dropdown-item:hover {
     background-color: var(--search-dropdown-item-hover); /* What color to use? */
   }
 
-  #headerbar .form-check-input {
+  #search-wrapper .form-check-input {
     background-color: var(--search-bg);
-    border: 1px solid var(--search-border);
+
     border-radius: 0;
   }
 
-  #headerbar .form-check-input:checked {
+  #search-wrapper .form-check-input:checked {
     background-color: var(--headerbar-text-2);
   }
 
-  #headerbar input {
+  #search-wrapper input {
     background-color: var(--search-bg);
-    border: 1px solid var(--search-border);
+    border-color: var(--search-border);
+    border-radius: 0;
+  }
+
+  #search-wrapper span.dropdown {
+    width: 25rem;
+    z-index: 4;
+  }
+
+  #search-wrapper .form-control:focus, #search-wrapper select:focus {
+    border-color: var(--search-border) !important;
+    box-shadow: inset 0 0 5px rgba(196, 205, 217, 1) !important;
+  }
+
+  #search-wrapper .dropdown-menu {
+    transform: translateY(-1px);
+  }
+
+  #search-wrapper .autocomplete {
+    position: relative;
+  }
+
+  #search-wrapper .autocomplete-result {
+    border-top: 1px solid var(--search-border);
+    margin: auto;
+  }
+
+  #search-wrapper .autocomplete-result * {
+    text-decoration: none;
+    color: var(--dark-color);
+  }
+
+  #search-wrapper .autocomplete-result span.result {
+    color: var(--vocab-link);
+  }
+
+  #search-wrapper .autocomplete-result span.d-inline {
+    white-space: nowrap;
   }
 
   /* Remove built-in x button from Internet Explorer */
-  #headerbar input[type=search]::-ms-clear { display: none; width : 0; height: 0; }
-  #headerbar input[type=search]::-ms-reveal { display: none; width : 0; height: 0; }
+  #search-wrapper input[type=search]::-ms-clear { display: none; width : 0; height: 0; }
+  #search-wrapper input[type=search]::-ms-reveal { display: none; width : 0; height: 0; }
   
   /* Remove built-in x button from Chrome */
-  #headerbar input[type="search"]::-webkit-search-decoration,
-  #headerbar input[type="search"]::-webkit-search-cancel-button,
-  #headerbar input[type="search"]::-webkit-search-results-button,
-  #headerbar input[type="search"]::-webkit-search-results-decoration { display: none; }
+  #search-wrapper input[type="search"]::-webkit-search-decoration,
+  #search-wrapper input[type="search"]::-webkit-search-cancel-button,
+  #search-wrapper input[type="search"]::-webkit-search-results-button,
+  #search-wrapper input[type="search"]::-webkit-search-results-decoration { display: none; }
 
   #search-button {
     background-color: var(--search-button-bg);
diff --git a/resource/js/vocab-search.js b/resource/js/vocab-search.js
index 76c28c203..de876f845 100644
--- a/resource/js/vocab-search.js
+++ b/resource/js/vocab-search.js
@@ -6,49 +6,233 @@ const vocabSearch = Vue.createApp({
       languages: [],
       selectedLanguage: null,
       searchTerm: null,
-      autoCompeteResults: [],
-      languageStrings: null
+      searchCounter: null,
+      renderedResultsList: [],
+      languageStrings: null,
+      msgs: null,
+      showDropdown: false
     }
   },
   mounted () {
     this.languages = window.SKOSMOS.languageOrder
     this.selectedLanguage = window.SKOSMOS.content_lang
-    this.languageStrings = window.SKOSMOS.language_strings[window.SKOSMOS.lang]
+    this.searchCounter = 0
+    this.languageStrings = window.SKOSMOS.language_strings[window.SKOSMOS.lang] ?? window.SKOSMOS.language_strings.en
+    this.msgs = window.SKOSMOS.msgs[window.SKOSMOS.lang] ?? window.SKOSMOS.msgs.en
+    this.renderedResultsList = []
   },
   methods: {
     autoComplete () {
+      const delayMs = 300
 
+      // when new autocomplete is fired, empty the previous result
+      this.renderedResultsList = []
+
+      // cancel the timer for upcoming API call
+      clearTimeout(this._timerId)
+      this.hideAutoComplete()
+
+      // TODO: if the search term is in cache, use the cache
+
+      // delay call, but don't execute if the search term is not at least two characters
+      if (this.searchTerm.length > 1) {
+        this._timerId = setTimeout(() => { this.search() }, delayMs)
+      }
+    },
+    search () {
+      const mySearchCounter = this.searchCounter + 1 // make sure we can identify this search later in case of several ongoing searches
+      this.searchCounter = mySearchCounter
+
+      let skosmosSearchUrl = 'rest/v1/' + window.SKOSMOS.vocab + '/search?'
+      const skosmosSearchUrlParams = new URLSearchParams({ query: this.formatSearchTerm(), lang: window.SKOSMOS.lang })
+      skosmosSearchUrl += skosmosSearchUrlParams.toString()
+
+      fetch(skosmosSearchUrl)
+        .then(data => data.json())
+        .then(data => {
+          if (mySearchCounter === this.searchCounter) {
+            this.renderedResultsList = data.results // update results (update cache if it is implemented)
+            this.renderResults() // render after the fetch has finished
+          }
+        })
+    },
+    formatSearchTerm () {
+      if (this.searchTerm.includes('*')) { return this.searchTerm }
+      return this.searchTerm + '*'
+    },
+    renderMatchingPart (searchTerm, label) {
+      if (label) {
+        const searchTermLowerCase = searchTerm.toLowerCase()
+        const labelLowerCase = label.toLowerCase()
+        if (labelLowerCase.includes(searchTermLowerCase)) {
+          const startIndex = labelLowerCase.indexOf(searchTermLowerCase)
+          const endIndex = startIndex + searchTermLowerCase.length
+          return {
+            before: label.substring(0, startIndex),
+            match: label.substring(startIndex, endIndex),
+            after: label.substring(endIndex)
+          }
+        }
+        return label
+      }
+      return null
+    },
+    translateType (type) {
+      return window.SKOSMOS.msgs[window.SKOSMOS.lang][type]
+    },
+    /*
+     * renderResults is used when the search string has been indexed in the cache
+     * it also shows the autocomplete results list
+     * TODO: Showing labels in other languages, extra concept information and such goes here
+     */
+    renderResults () {
+      // TODO: get the results list form cache if it is implemented
+      const renderedSearchTerm = this.searchTerm // save the search term in case it changes while rendering
+      this.renderedResultsList.forEach(result => {
+        if ('hiddenLabel' in result) {
+          result.hitType = 'hidden'
+          result.hit = this.renderMatchingPart(renderedSearchTerm, result.prefLabel)
+        } else if ('altLabel' in result) {
+          result.hitType = 'alt'
+          result.hit = this.renderMatchingPart(renderedSearchTerm, result.altLabel)
+          result.hitPref = this.renderMatchingPart(renderedSearchTerm, result.prefLabel)
+        } else if ('prefLabel' in result) {
+          result.hitType = 'pref'
+          result.hit = this.renderMatchingPart(renderedSearchTerm, result.prefLabel)
+        }
+        if ('uri' in result) { // create relative Skosmos page URL from the search result URI
+          result.pageUrl = window.SKOSMOS.vocab + '/' + window.SKOSMOS.lang + '/page?'
+          const urlParams = new URLSearchParams({ uri: result.uri })
+          result.pageUrl += urlParams.toString()
+        }
+        // render search result renderedTypes
+        if (result.type.length > 1) { // remove the type for SKOS concepts if the result has more than one type
+          result.type.splice(result.type.indexOf('skos:Concept'), 1)
+        }
+        // use the translateType function to map translations for the type IRIs
+        result.renderedType = result.type.map(this.translateType).join(', ')
+      })
+
+      if (this.renderedResultsList.length === 0) { // show no results message
+        this.renderedResultsList.push({
+          prefLabel: this.msgs['No results'],
+          lang: window.SKOSMOS.lang
+        })
+      }
+      this.showAutoComplete()
+    },
+    hideAutoComplete () {
+      this.showDropdown = false
+      this.$forceUpdate()
     },
     gotoSearchPage () {
       if (!this.searchTerm) return
 
       const currentVocab = window.SKOSMOS.vocab + '/' + window.SKOSMOS.lang + '/'
       const vocabHref = window.location.href.substring(0, window.location.href.lastIndexOf(window.SKOSMOS.vocab)) + currentVocab
-      let langParam = '&clang=' + window.SKOSMOS.content_lang
-      if (this.selectedLanguage === 'all') langParam += '&anylang=on'
-      const searchUrl = vocabHref + 'search?q=' + this.searchTerm + langParam
+      const searchUrlParams = new URLSearchParams({ clang: window.SKOSMOS.content_lang, q: this.searchTerm })
+      if (this.selectedLanguage === 'all') searchUrlParams.set('anylang', 'on')
+      const searchUrl = vocabHref + 'search?' + searchUrlParams.toString()
       window.location.href = searchUrl
     },
     changeLang () {
       window.SKOSMOS.content_lang = this.selectedLanguage
-      // TODO: Impelemnt partial page load to change content according to the new content language
+      // TODO: Implement (a normal) page load to change content according to the new content language
+    },
+    resetSearchTermAndHideDropdown () {
+      this.searchTerm = ''
+      this.renderedResultsList = []
+      this.hideAutoComplete()
+    },
+    /*
+     * Show the existing autocomplete list if it was hidden by onClickOutside()
+     */
+    showAutoComplete () {
+      console.log('Show autocomplete')
+      this.showDropdown = true
+      this.$forceUpdate()
     }
   },
   template: `
-    <div class="d-flex mb-2 my-auto ms-auto">
-      <div class="input-group" id="search-wrapper">
+    <div class="d-flex my-auto ms-auto">
+      <div class="d-flex justify-content-end input-group ms-auto" id="search-wrapper">
         <select class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown-item" aria-expanded="false"
           v-model="selectedLanguage"
           @change="changeLang()"
         >
           <option class="dropdown-item" v-for="(value, key) in languageStrings" :value="key">{{ value }}</option>
         </select>
-        <input type="search" class="form-control" aria-label="Text input with dropdown button" placeholder="Search..."
-          v-model="searchTerm"
-          @input="autoComplete()"
-          @keyup.enter="gotoSearchPage()"
-        >
-        <button id="clear-button" class="btn btn-danger" type="clear" v-if="searchTerm" @click="searchTerm = ''">
+        <span id="headerbar-search" class="dropdown">
+          <input type="search"
+            class="form-control"
+            id="search-field"
+            aria-expanded="false"
+            autocomplete="off"
+            data-bs-toggle=""
+            aria-label="Text input with dropdown button"
+            placeholder="Search..."
+            v-click-outside="hideAutoComplete"
+            v-model="searchTerm"
+            @input="autoComplete()"
+            @keyup.enter="gotoSearchPage()"
+            @click="showAutoComplete()">
+          <ul id="search-autocomplete-results" class="dropdown-menu" :class="{ 'show': showDropdown }"
+            aria-labelledby="search-field">
+            <li class="autocomplete-result container" v-for="result in renderedResultsList"
+              :key="result.prefLabel" >
+              <template v-if="result.pageUrl">
+                <a :href=result.pageUrl>
+                  <div class="row pb-1">
+                    <div class="col" v-if="result.hitType == 'hidden'">
+                      <span class="result">
+                        <template v-if="result.hit.hasOwnProperty('match')">
+                          {{ result.hit.before }}<b>{{ result.hit.match }}</b>{{ result.hit.after }}
+                        </template>
+                        <template v-else>
+                          {{ result.hit }}
+                        </template>
+                      </span>
+                    </div>
+                    <div class="col" v-else-if="result.hitType == 'alt'">
+                      <span>
+                        <template v-if="result.hit.hasOwnProperty('match')">
+                          {{ result.hit.before }}<b>{{ result.hit.match }}</b>{{ result.hit.after }}
+                        </template>
+                        <template v-else>
+                          {{ result.hit }}
+                        </template>
+                      </span>
+                      <span> &rarr;&nbsp;<span class="result">
+                          <template v-if="result.hitPref.hasOwnProperty('match')">
+                            {{ result.hitPref.before }}<b>{{ result.hitPref.match }}</b>{{ result.hitPref.after }}
+                          </template>
+                          <template v-else>
+                            {{ result.hitPref }}
+                          </template>
+                        </span>
+                      </span>
+                    </div>
+                    <div class="col" v-else-if="result.hitType == 'pref'">
+                      <span class="result">
+                        <template v-if="result.hit.hasOwnProperty('match')">
+                          {{ result.hit.before }}<b>{{ result.hit.match }}</b>{{ result.hit.after }}
+                        </template>
+                        <template v-else>
+                          {{ result.hit }}
+                        </template>
+                      </span>
+                    </div>
+                    <div class="col-auto align-self-end pe-1" v-html="result.renderedType"></div>
+                  </div>
+                </a>
+              </template>
+              <template v-else>
+                {{ result.prefLabel }}
+              </template>
+            </li>
+          </ul>
+        </span>
+        <button id="clear-button" class="btn btn-danger" type="clear" v-if="searchTerm" @click="resetSearchTermAndHideDropdown()">
           <i class="fa-solid fa-xmark"></i>
         </button>
         <button id="search-button" class="btn btn-outline-secondary" @click="gotoSearchPage()">
@@ -59,4 +243,19 @@ const vocabSearch = Vue.createApp({
   `
 })
 
+vocabSearch.directive('click-outside', {
+  beforeMount: (el, binding) => {
+    el.clickOutsideEvent = event => {
+      // Ensure the click was outside the element
+      if (!(el === event.target || el.contains(event.target))) {
+        binding.value(event) // Call the method provided in the directive's value
+      }
+    }
+    document.addEventListener('click', el.clickOutsideEvent)
+  },
+  unmounted: el => {
+    document.removeEventListener('click', el.clickOutsideEvent)
+  }
+})
+
 vocabSearch.mount('#search-vocab')
diff --git a/src/view/scripts.inc b/src/view/scripts.inc
index 7a07ddc69..912d547f2 100644
--- a/src/view/scripts.inc
+++ b/src/view/scripts.inc
@@ -38,7 +38,19 @@ window.SKOSMOS = {
                                 "en": "English",
                                 "se": "Northern Sami",
                                 "sv": "Swedish",
-                                "all": "In all languages"}}
+                                "all": "In all languages"}},
+  "msgs" : { "fi": { "No results": "Ei hakutuloksia",
+                     "http://www.yso.fi/onto/yso-meta/Concept": "Yleiskäsite",
+                     "http://www.yso.fi/onto/yso-meta/Hierarchy": "Hierarkisoiva käsite",
+                     "skos:Concept": "Käsite"},
+             "sv": { "No results": "Inga sökresultat",
+                     "http://www.yso.fi/onto/yso-meta/Concept": "Allmänbegrepp",
+                     "http://www.yso.fi/onto/yso-meta/Hierarchy": "Hierarki",
+                     "skos:Concept": "Begrepp"},
+             "en": { "No results": "No results",
+                     "http://www.yso.fi/onto/yso-meta/Concept": "General concept",
+                     "http://www.yso.fi/onto/yso-meta/Hierarchy": "Hierarchy",
+                     "skos:Concept": "Concept"}}
 }
 </script>
 
diff --git a/tests/cypress/template/vocab-search-bar.cy.js b/tests/cypress/template/vocab-search-bar.cy.js
index caf2671d2..4908bb860 100644
--- a/tests/cypress/template/vocab-search-bar.cy.js
+++ b/tests/cypress/template/vocab-search-bar.cy.js
@@ -2,7 +2,7 @@ describe('Vocab search bar', () => {
   it('search can be done with a chosen content language', () => {
     // go to YSO vocab front page
     cy.visit('/yso/fi/')
-    
+
     // Select an option from the dropdown
     cy.get('#search-wrapper select').select('sv');
 
@@ -13,14 +13,14 @@ describe('Vocab search bar', () => {
     cy.get('#search-button').click();
 
     //Verify the search page url (search result page tests are elsewhere)
-    cy.url().should('include', 'search?q=Katt&clang=sv');
+    cy.url().should('include', 'q=Katt').and('include', 'clang=sv');
 
   })
 
   it('search can be done with all languages', () => {
     // go to YSO vocab front page
     cy.visit('/yso/fi/')
-      
+
     // Choose 'all' languages
     cy.get('#search-wrapper select').select('all');
 
@@ -31,7 +31,104 @@ describe('Vocab search bar', () => {
     cy.get('#search-button').click();
 
     //Verify the search page url (search result page tests are elsewhere)
-    cy.url().should('include', 'search?q=Katt');
-    cy.url().should('include', 'anylang=on');
+    cy.url().should('include', 'q=Katt').and('include', 'anylang=on');
+  })
+
+  it('Writing in the text field triggers the autocomplete results list', () => {
+    // go to YSO vocab front page
+    cy.visit('/yso/fi/')
+
+    cy.get('#search-field').type('kas'); // perform autocomplete search
+    cy.get('#search-autocomplete-results', { timeout: 20000 }).should('be.visible').children().should('have.length.greaterThan', 4);
+  })
+
+  it('No results message is displayed if no results are found', () => {
+    // go to YSO vocab front page
+    cy.visit('/yso/en/')
+
+    cy.get('#search-field').type('kissa'); // even if the search yields no results, there shoulde a single line in the result list
+    cy.get('#search-autocomplete-results', { timeout: 20000 }).should('be.visible').children().should('have.length.greaterThan', 0);
+    cy.get('#search-autocomplete-results').within(() => {
+        cy.get('li').eq(0).invoke('text').should('contain', 'No results') // the single result should display a no results message
+      })
+  })
+
+  it('No results are displayed for autocomplete if there is not at leas two charecters in the search term', () => {
+    // go to YSO vocab front page
+    cy.visit('/yso/en/')
+
+    cy.get('#search-field').type('k'); // even if the search yields no results, there shoulde a single line in the result list
+    cy.get('#search-autocomplete-results', { timeout: 20000 }).should('not.be.visible');
+  })
+
+  it('The autocomplete list should not change due to previous searches completing', () => {
+    // go to YSO vocab front page
+    cy.visit('/yso/fi/')
+
+    cy.get('#search-field').type('ka');
+    cy.wait(300);
+    cy.get('#search-field').type('i');
+    cy.get('#search-autocomplete-results', { timeout: 20000 }).should('be.visible'); // the autocomplete should appear
+    cy.get('#search-autocomplete-results').children().should('have.length', 2)
+    cy.wait(10000); // wait extra 10 seconds to see if the 'ka' search adds results to the list
+    cy.get('#search-autocomplete-results').children().should('have.length', 2)
+  })
+
+  it('Clear button should hide the autocomplete list', () => {
+    // go to YSO vocab front page
+    cy.visit('/yso/en/')
+
+    cy.get('#search-field').type('kas');
+    cy.get('#search-autocomplete-results', { timeout: 20000 }).should('be.visible'); // the autocomplete should appear
+
+    cy.get('#clear-button').click()
+    cy.get('#search-autocomplete-results').should('not.be.visible'); // the autocomplete should disappear
+  })
+
+  it('Emptying the text search field hides the autocomplete list', () => {
+    // go to YSO vocab front page
+    cy.visit('/yso/en/')
+
+    cy.get('#search-field').type('kis');
+    cy.get('#search-autocomplete-results', { timeout: 20000 }).should('be.visible'); // the autocomplete should appear
+
+    cy.get('#search-field').clear();
+    cy.get('#search-autocomplete-results').should('not.be.visible'); // the autocomplete should disappear
+  })
+
+  it('Clicking outside of the autocomplete list hides the autocomplete list', () => {
+    // go to YSO vocab front page
+    cy.visit('/yso/en/')
+
+    cy.get('#search-field').type('kas');
+    cy.get('#search-autocomplete-results', { timeout: 20000 }).should('be.visible'); // the autocomplete should appear
+
+    cy.get('#main-container').click({ force: true }); // using force true to click on elements not considered actionable
+    cy.get('#search-autocomplete-results').should('not.be.visible'); // the autocomplete should disappear
+  })
+
+  it('AltLabel search results should bold the matching parts of altLabel and prefLabel', () => {
+    // go to YSO vocab front page
+    cy.visit('/yso/fi/')
+
+    cy.get('#search-field').type('zikkur');
+    cy.get('#search-autocomplete-results', { timeout: 20000 }).should('be.visible'); // the autocomplete should appear
+
+    cy.get('#search-autocomplete-results').within(() => { // the first result should have text 'zikkur' appearing twice in bold
+      cy.get('li').last().find('b').eq(0).should('have.text', 'zikkur')
+      cy.get('li').last().find('b').eq(1).should('have.text', 'zikkur')
+    })
+  })
+
+  it('Special characters can be used in the search', () => {
+    // go to YSO vocab front page
+    cy.visit('/yso/fi/')
+
+    cy.get('#search-field').type('*tus (*');
+    cy.get('#search-autocomplete-results', { timeout: 20000 }).should('be.visible'); // the autocomplete should appear
+
+    cy.get('#search-autocomplete-results').within(() => { // the first result should have text ajoitus (historia)
+      cy.get('li').first().should('contain', 'ajoitus (historia)')
+    })
   })
 })