Jump to content

Search/Filter Dropdown - First Letter Input Filter


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 post
Share on other sites
  • 2 weeks later...
Posted (edited)

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 post
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 post
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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...