White Arrow icon
Back to all Elements

CMS Autocomplete

A short JavaScript code for transferring a CMS list into an autocomplete on an input field.

We need 2 elements for this to work:

  1. Search bar (this needs to be an input field)
  2. List of items (could be a static list or a CMS dynamic list)

The first part of the code sets a few constants on the page:

  • The List wrapper
  • The list
  • The search bar

// Collection List Wrapper
 const listWrap = document.getElementById('listWrap');

 // Collection List
 const list = document.getElementById('autoCompleteList');

 // Search Input Field
 const searchBar = document.getElementById('searchBar');


Next we have a 'keyup' event listener. This part 'listens' to any key pressed inside the search bar and filters through the items lists. It changes the css of each item (display:block or display:none) according to the term typed.

searchBar.addEventListener('keyup', function(e){
   const term = e.target.value.toLowerCase();
   // All the elements that will be searchable (can be the item, or a div inside each item)
   const searchItems = list.getElementsByClassName('list-item');
     const text = item.firstElementChild.textContent;
       item.style.display = 'block';
     else {
       item.style.display = 'none';


The last part is the interaction that opens and closes the list when the focus is on the search bar.

Put all those 3 code snippets together at the custom code section of your page under the Before </body> tag.

// Open list when search bar is focused
 searchBar.addEventListener('focusin', (event) => {
   listWrap.style.maxHeight = "400px";
 // Close list when search bar is focused
 searchBar.addEventListener('focusout', (event) => {
   listWrap.style.maxHeight = "0";



browser mockup
Heart icon

A tongue scraper is is so much better in cleaning your tongue instead of the normal brushing it.

Might also interest you:



A clonable for creating an Alphabetical glossary

Read more
Blue arrow iconWhite Arrow icon

Dynamic Height


A (custom code) solution that combines CSS variables and Vanilla JavaScript for the shrinking / growing of browser top & bottom bars.

Read more
Blue arrow iconWhite Arrow icon

Desktop Grid, Mobile Slider


Change Webflow's Slider to act as a "regular" grid block on desktop, but go back to Slider on Tablet and smaller screens.

Read more
Blue arrow iconWhite Arrow icon