jQuery search and filter using keywords

I'm trying to program a search/filter function that searches through unordered list items with data-* attributes based on what the user types in.

<input type="text" placeholder="Search..." id="myInput" onkeyup="myFunction()">        
<ul id="myUL">
    <li><a href="#" data-keywords="photography">Digital Media Design</a></li>
    <li><a href="#" data-keywords="computers">Information Technology</a></li>
    <li><a href="#" data-keywords="coding">Programming</a></li>
</ul>

Here is the code I have so far that works only for one data-keywords item. I need help to get it to bring up search results based on multiple keywords.

<li><a href="#" data-keywords="photography photoshop illustrator premiere">Digital Media Design</a></li>

// Search functionality
function myFunction() {
    // Declare variables
    var input, filter, ul, li, a, i;
    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];
        if (a.innerHTML.toUpperCase().indexOf(filter) > -1 || $(a).data("keywords") === filter.toLocaleLowerCase()) {
            li[i].style.display = "";
        } else {
            li[i].style.display = "none";
        }
    }
}

If anybody has suggestions on how I can improve the code that would be awesome!