I have seen situations where web application has search textbox to search anything on their applications by typing into the input textbox, then possible sentences or keywords will display to the user like a dropdown. Then when user clicks on the particular search he wants, the user will be redirected to the page where that search is found.
I have asked similar question in the past but, the search was just to show keywords on a single page. This time I want to learn how to search the entire web application by typing what I want and as I am typing some keywords that are similar to the type word, will be displaying.
I don’t know if it is done with C# with database or C# with just HTML but it takes user to the search.
My textbox cannot increase in with, I don’t know why
How can I create such, please?
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, shrink-to-fit=no" />
<link rel="stylesheet" media="all" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" intergrity="sha384-AYmEC3Yw5cVb3ZcuHt0A9w35dYTsvhLPVnYs9eStHfGJv0vKxVfELGroGkvsg+p" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous" />
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet" media="all" />
<link href="css/bootstrap.css" rel="stylesheet" media="all" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="manifest" href="/site.webmanifest" />
<title></title>
<style>
.wrap {
background-repeat: no-repeat;
height: 100%;
background-position: center;
background-size: cover;
overflow: hidden;
position: relative;
width: 100%;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="script" runat="server"></asp:ScriptManager>
<div class="wrap">
<div class="subbottom" style="width: 100%; margin: 0 auto; margin-bottom: 80px;">
<br />
<div class="row col-sm-11" style="width: 100%; margin: 0 auto; padding: 6px;">
<div class="col-sm-7" style="width: 100%; margin: 0 auto; padding: 5px; margin-bottom: 6%; margin-top: 6%;">
<div style="font-weight: 800; margin-top: 5%; font-size: 11.2vmin; line-height: normal; vertical-align: baseline; letter-spacing: 0px; word-spacing: 1px; text-align: start;">
<span style="color: #145c7c; font-family: 'NT Wagner', sans-serif;">A good way</span>
<span style="color: #000000; font-family: 'NT Wagner', sans-serif;">to start learning</span>
</div>
<br />
<div class="row col-sm-8" style="width: 100%; margin: 0 auto; padding: 2px; margin-top: 2%; margin-bottom: 7%;">
<div>
<asp:TextBox ID="serachtext" runat="server" CssClass="form-control" Width="100%" placeholder="How can we help you?"></asp:TextBox>
</div>
<span>
<button id="Searchbtn" runat="server" class="btn btn-primary" style="height: auto; background-color: #2c395c; border: 0.3px solid #d6d8d9;">
<i class="far fa-search" aria-hidden="true" style="font-size: 11pt; color: white;"></i>
</button>
</span>
</div>
</div>
</div>
</div>
</div>
</form>
</body>
</html>
