I have 2 questions. I have a view that returns a dynamic model list. I have a search box that then filters these results. I also have it setup to return no results if the search box is empty. All this works fine. My 2 questions are: I will post all the code
together.
Everything works fine just these 2 enhancements I would like.
1- I have the following code that hides that table upon initial load of the view - the problem is it quickly shows all the model lists before it hides it. Is there a way to hide the table even before the page loads?
2- Is it possible to start the search after 3 characters are typed and not 1 character is typed?
According to your needs, I modified your code, you can refer to it.
Baze72
Is there a way to hide the table even before the page loads
You can add style="display:none" to make the data not displayed.
Baze72
Is it possible to start the search after 3 characters are typed and not 1 character is typed?
You can add a judgment sentence for the input, and query when the length of the input data meets the requirements.
Model
public class ViewModeltest39
{
public List<Employee> Employee { get; set; }
}
public class Employee {
public int ID { get; set; }
public string FirstName { get; set; }
public string PhoneExt { get; set; }
}
Member
29 Points
127 Posts
Hiding Table on load - Search Box search after first 2 characters are entered
Aug 28, 2020 09:54 PM|Baze72|LINK
I have 2 questions. I have a view that returns a dynamic model list. I have a search box that then filters these results. I also have it setup to return no results if the search box is empty. All this works fine. My 2 questions are: I will post all the code together.
Everything works fine just these 2 enhancements I would like.
1- I have the following code that hides that table upon initial load of the view - the problem is it quickly shows all the model lists before it hides it. Is there a way to hide the table even before the page loads?
2- Is it possible to start the search after 3 characters are typed and not 1 character is typed?
Thanks!
<script> $("#SearchInput").change(function () { if ($(this).val() == null) { $('#div1').attr('Style', 'display:none'); alert("Test"); } else { $('#div1').attr('Style', 'display:inline'); } }); function myFunction() { var input, filter, table, tr, td, i; input = document.getElementById("SearchInput"); if (input.value == "") { document.getElementById("empUsers").style.display = 'none' }; if (input.value != "") { document.getElementById("empUsers").style.display = 'inline' }; filter = input.value.toUpperCase(); table = document.getElementById("empUsers"); tr = table.getElementsByTagName("tr"); for (i = 0; i < tr.length; i++) { td = tr[i].getElementsByTagName("td")[0]; if (td) { if (td.innerHTML.toUpperCase().indexOf(filter) > -1) { tr[i].style.display = ""; } else { tr[i].style.display = "none"; } } } } </script> <table cellpadding="0" cellspacing="0" style="width: 250px" id="empUsers"> <tr> <td colspan="3"> </td> </tr> <tr> <th class="auto-style1" style="width: 200px" align="left"> Name </th> <th class="auto-style1" style="width: 75px" align="left"> Extension </th> </tr> @foreach (Employee EmployeeInfo in Model.Employee) { <tr> <th class="auto-style1" style="width: 200px" align="left" colspan="2"> <table> <tr> <td style="width: 200px" align="left"><b> @Html.ActionLink(EmployeeInfo.FirstName, "Details", "Employees", new { id = EmployeeInfo.ID }, null)</b></td> <td style="width: 75px" align="left" valign="top">@EmployeeInfo.PhoneExt</td> </tr> </table> </th> </tr> } </table>Participant
1400 Points
451 Posts
Re: Hiding Table on load - Search Box search after first 2 characters are entered
Aug 31, 2020 10:51 AM|YihuiSun|LINK
Hi Baze72,
According to your needs, I modified your code, you can refer to it.
Model
public class ViewModeltest39 { public List<Employee> Employee { get; set; } } public class Employee { public int ID { get; set; } public string FirstName { get; set; } public string PhoneExt { get; set; } }Controller
public ActionResult Index() { ViewModeltest39 testviewmodel = new ViewModeltest39(); testviewmodel.Employee = new List<Employee>(); testviewmodel.Employee.Add(new Employee { ID = 1, FirstName = "test", PhoneExt = "123" }); testviewmodel.Employee.Add(new Employee { ID = 2, FirstName = "Hello", PhoneExt = "123" }); testviewmodel.Employee.Add(new Employee { ID = 3, FirstName = "You", PhoneExt = "123" }); testviewmodel.Employee.Add(new Employee { ID = 4, FirstName = "You345", PhoneExt = "123" }); testviewmodel.Employee.Add(new Employee { ID = 5, FirstName = "You34589", PhoneExt = "123" }); return View(testviewmodel); }Index
Here is the result.
Best Regards,
YihuiSun
Member
29 Points
127 Posts
Re: Hiding Table on load - Search Box search after first 2 characters are entered
Aug 31, 2020 12:36 PM|Baze72|LINK
Great. The style="display:none" worked. I didn't know that is would over right to style="display:inline" with the script.
One last issue. When I search it only is searching EmployeeIndo.FirstName. How can I get it to also include PhoneExt, and Initials?
<table cellpadding="0" cellspacing="0" style="width: 250px; display:none"id="empUsers"> <tr> <td colspan="3"> </td> </tr> <tr> <th class="auto-style1" style="width: 200px" align="left"> Name </th> <th class="auto-style1" style="width: 75px" align="left"> Extension </th> </tr> @foreach (Employee EmployeeInfo in Model.Employee) { <tr> <th class="auto-style1" style="width: 200px" align="left" colspan="2"> <table> <tr> <td style="width: 200px" align="left"><b> @Html.ActionLink(EmployeeInfo.FirstName, "Details", "Employees", new { id = EmployeeInfo.ID }, null)</b></td> <td style="width: 75px" align="left" valign="top">@EmployeeInfo.PhoneExt</td> <td style="width: 75px" align="left" valign="top">@EmployeeInfo.Initials</td> </tr> </table> </th> </tr> } </table>Participant
1400 Points
451 Posts
Re: Hiding Table on load - Search Box search after first 2 characters are entered
Sep 01, 2020 02:17 AM|YihuiSun|LINK
Hi Baze72,
According to your needs, you can modify your code like this.Here are two solutions.
for (i = 0; i < tr.length; i++) { td = tr[i].getElementsByTagName("td"); if (td[0] || td[1]) { if (td[0].innerHTML.toUpperCase().indexOf(filter) > -1 || td[1].innerHTML.toUpperCase().indexOf(filter) > -1) { tr[i].style.display = ""; } else { tr[i].style.display = "none"; } } }Or
for (i = 0; i < tr.length; i++) { if (tr[i]) { if (tr[i].innerHTML.toUpperCase().indexOf(filter) > -1) { tr[i].style.display = ""; } else { tr[i].style.display = "none"; } } }Here is the result.
Best Regards,
YihuiSun