Jump to content

Search/Filter Dropdown - First Letter Input Filter


TH71

Recommended Posts

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

Link to comment
Share on other sites

  • 2 weeks later...

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

CropperCapture[1].jpg

 

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

 

CropperCapture[2].jpg

Edited by TH71
Link to comment
Share on other sites

/* 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";
    }
  }
}

 

Link to comment
Share on other sites

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👍

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...