List which should show as empty until items are searched

Question

Hey,
I've inserted an App Part of a list using a custom view. This view shows only the title of the items. My goal is to have the list shown as empty (=basically only showing the search box of the App Part) until the user searches the list.
I'd like to achieve this with OOTB features if it's just possible. The search box for the list is activated from its properties (Display search box).
I wonder if this could be achieved somehow with list view filtering, such as "Show the items when column [Title] [contains] [searchboxvalue]".
I'm aware of the Filter web parts, but their straight provided requirement to match exactly the item's title is something I'm trying to avoid with the list's own search box.

Answer 1

Hi,
We can use CSS+jQuery to achieve it, please add the following code into a content editor web part.
<style>
table.ms-listviewtable{
display:none;
</style>
<script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
setTimeout(function () {
$("img[id^='inplaceSearchDiv_WPQ']").click(function () {
if ($(this).attr("title") == "Search") {
$("table.ms-listviewtable").show();
if ($(this).attr("title") == "Clear search") {
$("table.ms-listviewtable").hide();
}, 5000);
</script>
The issue shouldn't in the referencing of jQuery. I entered alert boxes to different parts of the code followingly:
$(function () {
alert("first");
setTimeout(function () {
alert("second");
$("img[id^='inplaceSearchDiv_WPQ']").click(function () {
alert("third");
if ($(this).attr("title") == "Search") {
alert("fourth");
$("table.ms-listviewtable").show();
if ($(this).attr("title") == "Clear search") {
alert("fifth");
$("table.ms-listviewtable").hide();
}, 5000);
The alert first was popped up right after refreshing the page. The
second came 5 seconds later (Timeout function). The alert third popped up once clicking the actual search symbol (magnifying lens
or the x-symbol for clearing the search). fourth
and fifth never were alerted.
I'd like ask about two parts of this code:
Should the $("img[id^='inplaceSearchDiv_WPQ']")
be in the code as it is, or should it be e.g. WPQ2 to match the web part's ID?
About the if
($(this).attr("title")
==
"Search") part:
Should the title be the column name of the list which we are searching for?