HTML5 Reference to from "List", List is getting way to big Options

[Dohm]

Brand new to this site and to the wonderful world of coding and creating. I thank you all for any help.

I have created a simple site, well which I use as my personal server. That is not the issue as the site works.

I have a search list, which I add more and more each day... Have about 1400 entries at the moment which I copy and paste from notepad/excel.

I am wondering if there is a better way then what I am doing right now... and hope this is in the right forum topic placement, if not please let me know where to add this.

So my function script is as follow:

CODE

<script>
function myFunction() {
  // Declare variables
    var input, filter, ul, li, a, i, txtValue;
  input = document.getElementById('myInput');
  filter = input.value.toUpperCase();
  ul = document.getElementById("myUL");
  li = ul.getElementsByTagName('li');

  // Loop through all list items, and hide those who don't match the search query
  for (i = 0; i < li.length; i++) {
    a = li[i].getElementsByTagName("a")[0];
      txtValue = a.textContent || a.innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      li[i].style.display = "";
    } else {
      li[i].style.display = "none";
    }
  }
}
</script>

Then I have my input within the body:

CODE

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for title..">

<ul id="myUL">

"Entries"

</ul>

Anything that I add in the "Entries" section, Example:

CODE

<li class="invalid nav-item"><a href="location.html">Title</a></li>

will appear when I insert something in the search bar (Filter), I do have lots of entries... like I said over 1400 and climbing. What I am looking for is a way that I could only change, well replace the entier list with the new one.

I am working with excel which I keep my lists, then I copy and paste this list to a notepad, to tidy up the space that excel creates, then I replace the entire list by selecting the full list, deleting it and pasting the new one.

Is there a better way to make this happen? Like a way to reference the list that is in between <ul id="myUL"> and </ul>. Right now I am using to many method just to transfer the data... Also using notepad++ to make these changes.

Any help is appreciated

Thank you.

[Dohm]

Plus I am making a picture link search...so when one would search for a title, it will bring that specific picture as filter.

This post has been edited by Dohm: Jun 4 2020, 10:04 AM