locked
Hiding Table on load - Search Box search after first 2 characters are entered RRS feed

  • Question

  • User982203039 posted

    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>

    Friday, August 28, 2020 9:54 PM

Answers

  • User1686398519 posted

    Hi Baze72,

    According to your needs, I modified your code, you can refer to it.

    1. 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.
    2. 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; }
        }

    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

    @model WebApplication26.Models.ViewModeltest39
    @using WebApplication26.Models
    <input id="SearchInput" class="form-control"/>
    <div id="div1" style="display:none">
        <table cellpadding="0" cellspacing="0" style="width: 250px" id="empUsers">
            <thead>
                <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>
            </thead>
            
            <tbody>
                @foreach (Employee EmployeeInfo in Model.Employee)
                {
                    <tr class="trdata">
                        <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>
                }
            </tbody>
            
        </table>
    </div>
    @section scripts{
        <script>
            $("#SearchInput").bind("keyup change", function () {
                if ($("#SearchInput").val().length > 2) {
                    myFunction();
                    $('#div1').attr('Style', 'display:inline');
                } else {
                    $('#div1').attr('Style', 'display:none');
                }
            });
            function myFunction() {
                var input, filter, table, tr, td, i,j;
                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.getElementsByClassName("trdata");
                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>
        }

    Here is the result.

    Best Regards,

    YihuiSun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, August 31, 2020 10:51 AM

All replies

  • User1686398519 posted

    Hi Baze72,

    According to your needs, I modified your code, you can refer to it.

    1. 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.
    2. 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; }
        }

    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

    @model WebApplication26.Models.ViewModeltest39
    @using WebApplication26.Models
    <input id="SearchInput" class="form-control"/>
    <div id="div1" style="display:none">
        <table cellpadding="0" cellspacing="0" style="width: 250px" id="empUsers">
            <thead>
                <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>
            </thead>
            
            <tbody>
                @foreach (Employee EmployeeInfo in Model.Employee)
                {
                    <tr class="trdata">
                        <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>
                }
            </tbody>
            
        </table>
    </div>
    @section scripts{
        <script>
            $("#SearchInput").bind("keyup change", function () {
                if ($("#SearchInput").val().length > 2) {
                    myFunction();
                    $('#div1').attr('Style', 'display:inline');
                } else {
                    $('#div1').attr('Style', 'display:none');
                }
            });
            function myFunction() {
                var input, filter, table, tr, td, i,j;
                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.getElementsByClassName("trdata");
                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>
        }

    Here is the result.

    Best Regards,

    YihuiSun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, August 31, 2020 10:51 AM
  • User982203039 posted

    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>

    Monday, August 31, 2020 12:36 PM
  • User1686398519 posted

    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

    Tuesday, September 1, 2020 2:17 AM