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!