Creating a search box for a list (BasicTable View) - Only search that partilcar list

Question

How do you create a search box for a list in Basic Table view style? Preferably using the content editor web part or script editor.

Answer 1

I use this as a CEWP/Snippet occasionally when a 'search only this list' function is required. It's like the simple list search that is default on a document library, but you can use this on lists to define a single or multiple lookup value. It's a little old school with a 'search' and a 'clear' buttons; I'm sure someone more capable in css could tweak that.

You'll want to update the URL and Field Name values - The search is page relative, not list or library. Get the object values for your field names from hovering over those attributed in List Settings, view in lower-left browser.

For example, if one of the site columns on my list is First Search Field, it would look like this in your browser preview area while hovering:

https://yourcompany.sharepoint.com/sites/_layouts/15/listedit.aspx?List=%7B84156346%2DBAB7%2D4FB8%2DB9B1%2DEFD5C2195901%7D&Field=First%5Fx0020%5FSearch5Fx0020%5FField"> Event Category

The bold area is the option value; the text after that defines what users will see for that value.

---

"<script type=""text/javascript"">

function RedirectUrl() {
    var tb = document.getElementById(""tbSearch"").value;
    var cs = document.getElementById(""sfield"").value;
    var url = """";

    if (tb != """") {
        if (cs == ""Column2"" || cs == ""Column3"" || cs == ""Column4"" || cs == ""Column5"") {
            url = ""FilterField1="" + cs + ""&FilterValue1="" + tb;
            window.location.href = ""https://yourcompany.sharepoint.com/sites/pages/pagename.aspx?"" + url;
        }
        else {
            url = ""FilterName="" + cs + ""&FilterMultiValue=*"" + tb + ""*"";
            window.location.href = ""https://yourcompany.sharepoint.com/sites/pages/pagename.aspx?"" + url;
        }
    }
    else {
        return false;
    }
}
function ClearUrl() {
    window.location.href = ""https://yourcompany.sharepoint.com/sites/pages/pagename.aspx?"";
}
    </script>Search Field: <select id=""sfield"">
    <option value=""first%5Fx0020%5F search%5Fx0020%5F field"">First Search Field </option>
    <option value=""second%5Fx0020%5Fsearch%5Fx0020%5F field"">Second Search Field</option>        
     </select>   Search text: <input id=""tbSearch"" type=""text""/>
     <input id=""btnSearch"" onclick=""return RedirectUrl();"" type=""button"" value=""Search""/>
     <input id=""btnClear"" onclick=""return ClearUrl();"" type=""button"" value=""Clear""/>"

Answer 2

One of the approaches to do this is to simply have a separate search box in content editor and use a script to link that with the search box for the webpart itself. This only works if you show the search box in the web part in addition to the custom search box you are making.

I asked a similar question and have modified the answer to what I ended up using with additional explanations on what it is trying to do. Hope this helps.

// Set up - wpqID was added since that can change based on the DOM of your wiki page
var wpqID = 4; 
var searchInput = document.getElementById("inplaceSearchDiv_WPQ" + wpqID + "_lsinput");
var searchImgSpan = document.getElementById("inplaceSearchDiv_WPQ" + wpqID + "_lsimgspan")
var searchIcon = document.getElementById("inplaceSearchDiv_WPQ" + wpqID + "_lsimg")

// Click seems to be required on imgspan in order for proper inputting, if you don't do that, sometimes the text disappears on its own.
searchImgSpan.click();
searchInput.value = "******";

// Event using the latest javascript guidelines
var ev = new Event('input', {'view': window, 'bubbles': true, 'cancelable': true});
searchInput.dispatchEvent(ev);

// Runs the search using whatever event handlers that was originally attached to the image
searchIcon.click();