I have code that retrieve data from users table and normal search bars also works perfect.
I want to add search suggestion according to database so that user enter 1 or 2 words or number then related to that suggestion appear so that it can easy search for user.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="HomePage.aspx.cs" Inherits="IPPhoneDirectory.HomePage" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Sofia+Sans+Condensed:wght@400;700&display=swap');
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
font-family: 'Sofia Sans Condensed', sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
#container {
padding: 10px;
border-radius: 10px;
text-align: center;
width: 100%;
margin: 15px auto;
background-color: #fff;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}
h1 {
display: flex;
justify-content: center;
align-items: center;
color: black;
margin-bottom: 20px;
}
#search {
margin-bottom: 20px;
display: flex;
justify-content: center;
align-items: center;
}
#txtSearch {
padding: 10px;
border: 2px solid #4CAF50;
border-radius: 5px;
margin-right: 10px;
width: 400px;
}
#btnSearch {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
font-family: 'Sofia Sans Condensed', sans-serif;
}
#btnSearch:hover {
background-color: #45a049;
}
#GridView1 {
width: 100%;
border-collapse: collapse;
}
#GridView1 th, #GridView1 td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
#GridView1 th {
background-color: #f2f2f2;
color: #333;
}
#GridView1 tr:nth-child(even) {
background-color: #f9f9f9;
}
#GridView1 tr:hover {
background-color: #f0f0f0;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="container">
<div id="search">
<asp:TextBox ID="txtSearch" runat="server" ></asp:TextBox>
<asp:Button ID="btnSearch" runat="server" Text="Search" OnClick="btnSearch_Click" />
</div>
<asp:GridView ID="GridView1" runat="server">
</asp:GridView>
</div>
</form>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data.SqlClient;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using MySql.Data.MySqlClient;
namespace IPPhoneDirectory
{
public partial class HomePage : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindGridView();
}
}
private void BindGridView()
{
string query = "SELECT ext as Extensions, description as Name, department as Department, station as Station FROM users";
string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
if (!string.IsNullOrEmpty(txtSearch.Text))
{
query += " WHERE description LIKE @search OR ext LIKE @search";
}
using (MySqlConnection con = new MySqlConnection(constr))
{
using (MySqlCommand cmd = new MySqlCommand(query))
{
cmd.Parameters.AddWithValue("@search", "%" + txtSearch.Text + "%");
using (MySqlDataAdapter sda = new MySqlDataAdapter())
{
cmd.Connection = con;
sda.SelectCommand = cmd;
using (DataTable dt = new DataTable())
{
sda.Fill(dt);
GridView1.DataSource = dt;
GridView1.DataBind();
}
}
}
}
}
protected void btnSearch_Click(object sender, EventArgs e)
{
BindGridView();
}
}
}
