Hiding Table on load - Search Box search after first 2 characters are entered[Answered] RSS

3 replies

Last post Sep 01, 2020 02:17 AM by YihuiSun

‹ Previous Thread|Next Thread ›

Shortcuts

Related Links

Baze72

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>

YihuiSun

Contributor

2770 Points

793 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.

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; }
    }

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

.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.

Baze72

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>

YihuiSun

Contributor

2770 Points

793 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";
                    }
                }
            }

            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

.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.

‹ Previous Thread|Next Thread ›