I am looking for some help from the community on how to add a Dynamic filter to a SharePoint List.

Our team is primarily in finance so I have no experience in Java scripts, I researched online and found a solution and look like a closest match to what we need.

The goal is to type in some search text (not an exact match to the items in filter drop-down) and the filter action can trigger a filtered page showing only the list of items that contain the searched text. Currently, my solution is to add a HTML Web part on the page, and drop in the java scripts codes for a search/clear button.

For example, in the screenshot, if I search for Sales, then two items will show up in the filtered URL, i.e. Sales Report and Profit report because Sales keyword contains in these two items.

enter image description here

Below codes will work when the searched text exactly matching the string in one field of the SharePoint List, however doesn’t work when typing in a text that’s not exactly matching.

<script type="text/javascript">

  function Search () {
    var st = document.getElementById("Searchtxt").value;
    var cd = document.getElementById("coldropdown").value;
    var url = "";

    if (st != "") {
        if (cd == "Title" || cd == "Last Name" || cd == "Country" || cd == "Designation") {
            url = "FilterField1=" + cd + "&FilterValue1=" + st;
            window.location.href = "AllItems.aspx?" + url;
        }
        else {
            url = "FilterName=" + cd + "&FilterMultiValue=*" + st + "*";
            window.location.href = "AllItems.aspx?" + url;
        }
    }
    else {
        return false;
    }
  }
  function Clear() {
    window.location.href = "AllItems.aspx?";
  }
</script>

SearchField: <select id="coldropdown">
  <!----provide internal name of column, List, List Setting, click column name,
   go to URL, get the string after = sign, fill in "" ---->
  <option value="Title">First Name</option>
  <option value="Last Name">Last Name</option>
  <option value="Country">Country</option>
  <option value="Designation">Designation</option>
</select>
Search text: <input id="Searchtxt" type="text"/>

<input id="btnSearch" onclick="return Search();" type="button" value="Search"/>
<input id="btnClear" onclick="return Clear();" type="button" value="Clear"/>