Hi haider6.9,
I have created a sample which full fill your requirement by taking reference of below article
SQL
CREATE TABLE sections
(
section_id INT ,
section NVARCHAR(50),
sub_section NVARCHAR(50),
sub_sub_section NVARCHAR(50),
sub_sub_sub_section NVARCHAR(50)
)
INSERT INTO sections VALUES(1,'Section 1','sub_section 1','sub_sub_section 1','sub_sub_sub_section 1')
INSERT INTO sections VALUES(2,'Section 2','sub_section 2','sub_sub_section 2','sub_sub_sub_section 2')
INSERT INTO sections VALUES(3,'Section 3','sub_section 3','sub_sub_section 3','sub_sub_sub_section 3')
INSERT INTO sections VALUES(4,'Section 4','sub_section 4','sub_sub_section 4','sub_sub_sub_section 4')
INSERT INTO sections VALUES(5,'Section 5','sub_section 5','sub_sub_section 5','sub_sub_sub_section 5')
INSERT INTO sections VALUES(6,'Section 6','sub_section 6','sub_sub_section 6','sub_sub_sub_section 6')
INSERT INTO sections VALUES(7,'Section 7','sub_section 7','sub_sub_section 7','sub_sub_sub_section 7')
INSERT INTO sections VALUES(8,'Section 8','sub_section 8','sub_sub_section 8','sub_sub_sub_section 8')
INSERT INTO sections VALUES(9,'Section 9','sub_section 9','sub_sub_section 9','sub_sub_sub_section 9')
INSERT INTO sections VALUES(10,'Section 10','sub_section 10','sub_sub_section 10','sub_sub_sub_section 10')
CREATE PROCEDURE GetSections
@SearchText NVARCHAR(50)
AS
BEGIN
SELECT section_id,section FROM sections
WHERE section LIKE @SearchText + '%'
UNION ALL
SELECT section_id,sub_section FROM sections
WHERE sub_section LIKE @SearchText + '%'
UNION ALL
SELECT section_id,sub_sub_section FROM sections
WHERE sub_sub_section LIKE @SearchText + '%'
UNION ALL
SELECT section_id,sub_sub_sub_section FROM sections
WHERE sub_sub_sub_section LIKE @SearchText + '%'
END
GO
HTML
<div>
<link rel="stylesheet" href='http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css'
media="screen" />
<script type="text/javascript" src='http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js'></script>
<script type="text/javascript" src='http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js'></script>
<script type="text/javascript" src="http://cdn.rawgit.com/bassjobsen/Bootstrap-3-Typeahead/master/bootstrap3-typeahead.min.js"></script>
<link rel="Stylesheet" href="https://twitter.github.io/typeahead.js/css/examples.css" />
<style type="text/css">
.typeahead.dropdown-menu
{
height: 300px;
overflow-y: auto;
}
</style>
<script type="text/javascript">
$(function () {
$('[id*=txtSearch]').typeahead({
hint: true,
highlight: true,
minLength: 1,
items: 'all'
, source: function (request, response) {
$.ajax({
url: '<%=ResolveUrl("~/CS.aspx/GetSections") %>',
data: "{ 'prefix': '" + request + "'}",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
success: function (data) {
items = [];
map = {};
$.each(data.d, function (i, item) {
var id = item.split('-')[0];
var name = item.split('-')[1];
map[name] = { id: id, name: name };
items.push(name);
});
response(items);
},
error: function (response) {
alert(response.responseText);
},
failure: function (response) {
alert(response.responseText);
}
});
},
updater: function (item) {
$('[id*=hfSectionId]').val(map[item].id);
return item;
}
});
});
</script>
</div>
<div>
Enter search term:
<asp:TextBox ID="txtSearch" runat="server" CssClass="form-control" autocomplete="off"
Width="300" />
<br />
<asp:HiddenField ID="hfSectionId" runat="server" />
<asp:Button ID="Button1" Text="Submit" runat="server" OnClick="Submit" />
</div>
C#
[System.Web.Services.WebMethod]
public static string[] GetSections(string prefix)
{
List<string> sections = new List<string>();
using (SqlConnection conn = new SqlConnection())
{
conn.ConnectionString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlCommand cmd = new SqlCommand())
{
cmd.CommandText = "GetSections";
cmd.CommandType = System.Data.CommandType.StoredProcedure;
cmd.Parameters.AddWithValue("@SearchText", prefix);
cmd.Connection = conn;
conn.Open();
using (SqlDataReader sdr = cmd.ExecuteReader())
{
while (sdr.Read())
{
sections.Add(string.Format("{0}-{1}", sdr["section_id"], sdr["section"]));
}
}
conn.Close();
}
}
return sections.ToArray();
}
protected void Submit(object sender, EventArgs e)
{
string section_id = Request.Form[txtSearch.UniqueID];
string section = Request.Form[hfSectionId.UniqueID];
//here you can do code of insert.
ClientScript.RegisterStartupScript(this.GetType(), "alert", "alert('Name: " + section_id + "\\nID: " + section + "');", true);
}
VB.Net
<System.Web.Services.WebMethod> _
Public Shared Function GetSections(prefix As String) As String()
Dim sections As New List(Of String)()
Using conn As New SqlConnection()
conn.ConnectionString = ConfigurationManager.ConnectionStrings("constr").ConnectionString
Using cmd As New SqlCommand()
cmd.CommandText = "GetSections"
cmd.CommandType = System.Data.CommandType.StoredProcedure
cmd.Parameters.AddWithValue("@SearchText", prefix)
cmd.Connection = conn
conn.Open()
Using sdr As SqlDataReader = cmd.ExecuteReader()
While sdr.Read()
sections.Add(String.Format("{0}-{1}", sdr("section_id"), sdr("section")))
End While
End Using
conn.Close()
End Using
End Using
Return sections.ToArray()
End Function
Protected Sub Submit(sender As Object, e As EventArgs)
Dim section_id As String = Request.Form(txtSearch.UniqueID)
Dim section As String = Request.Form(hfSectionId.UniqueID)
ClientScript.RegisterStartupScript(Me.[GetType](), "alert", (Convert.ToString((Convert.ToString("alert('Name: ") & section_id) + "\nID: ") & section) + "');", True)
End Sub
Screenshot
