Search/Filter Dropdown - First Letter Input Filter

[TH71]

https://www.w3schools.com/howto/howto_js_filter_dropdown.asp

I hope it is possible, but can the results when filtered show words beginning with the first letter input in the Search Box and not any word that has the first letter inputted somewhere in that word?

The Demo Dropdown Menu shows

About
Base
Blog
Contact
Custom
Support
Tools

So for example using the letter B as the first letter inputted, the Demo shows every word with the letter B in it showing when inputting the letter B first

About
Base
Blog

Can you get the result that if you started typing B then just Base and Blog show and not showing every word with the letter B in it like

Base
Blog

And just like the first letter inputted as T shows

About
Contact
Custom
Support
Tools

Instead of just 

Tools

 

Thanks

[dsonesuk]

Just use the indexOf to restrict the number of characters is searches through

if (txtValue.toUpperCase().indexOf(filter) > -1 && txtValue.toUpperCase().indexOf(filter) < 1)

 

[TH71]

Thanks that has worked 👍

Not really important but when you Click on the Dropdown, it shows the full menu list. Is it possible for no menu to show until a letter is typed?

 

As it shows now when click on Dropdown

 

Can it look like this until a letter it inputted in the Search Box

 

Edited March 3, 2020 by TH71

[dsonesuk]

/* CSS */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: none;/* dsonesuk amended from block*/
}

/* Javascript */
function filterFunction() {
  var input, filter, ul, li, a, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  div = document.getElementById("myDropdown");
  a = div.getElementsByTagName("a");
  for (i = 0; i < a.length; i++) {
    txtValue = a[i].textContent || a[i].innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      a[i].style.display = "block";/*dsonesuk amended from "" */
    } else {
      a[i].style.display = "none";
    }
  }
}

 

[TH71]

Thanks for the reply

It does work as requested by removing the full menu list but when you start typing a letter eg A, it now shows ALL the words with the letters A in it as per my original post

I notice you have removed/altered the line below which allowed only words with the first letter inputted in the Search Box as per your reply to my opening post 

if (txtValue.toUpperCase().indexOf(filter) > -1 && txtValue.toUpperCase().indexOf(filter) < 1)

is this correct or does this line need to be included?

 

Thanks again👍

[dsonesuk]

Obviously its required. Instead of asking question if its required, why not just try it! First.