Hi! I want use auto complete TextBox and multi select drop down list. Below I show our requirement by photo. It’s my requirement.
If multi select drop down list worked auto complete TextBox show result in top. If auto complete TextBox worked multi select drop down list not worked. It’s my result but not my requirement.
Can you help me? I shared our code below: sult but not my requirement.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="dolgeForm.aspx.cs" Inherits="RProject.dolgeForm" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="Scripts/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="Styles/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="Styles/bootstrap-multiselect.css" rel="stylesheet" type="text/css" />
<link href="Styles/StyleRecive.css" rel="Stylesheet" type="text/css" />
<script src="js/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="js/jquery.ui.core.js" type="text/javascript"></script>
<script src="js/jquery.ui.widget.js" type="text/javascript"></script>
<script src="js/jquery.ui.position.js" type="text/javascript"></script>
<script type="text/javascript" src="Scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="Scripts/bootstrap-multiselect.js"></script>
<script src="js/jquery.ui.autocomplete.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("[id*=txtSearch]").autocomplete({ source: '<%=ResolveUrl("~/Search.ashx" ) %>' });
});
</script>
<script type="text/javascript">
$(function () {
$('[id*=ddl]').multiselect({
includeSelectAllOption: true
});
});
</script>
</head>
<body class="f">
<form id="form1" runat="server">
<div>
<asp:DropDownList ID="ddl" runat="server" multiple="multiple" Height="22px" Width="230px">
<asp:ListItem>Sadriddin</asp:ListItem>
<asp:ListItem>Rustam</asp:ListItem>
<asp:ListItem>Nurullo</asp:ListItem>
<asp:ListItem>Firuz</asp:ListItem>
<asp:ListItem>Yakub</asp:ListItem>
<asp:ListItem>Asror</asp:ListItem>
</asp:DropDownList>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<asp:TextBox ID="txtSearch" runat="server" Width="814px"></asp:TextBox>
</div>
</form>
</body>
</html>
Search.ashx code:
<%@ WebHandler Language="C#" Class="Search_CS" %>
using System;
using System.Web;
using System.Data.SqlClient;
using System.Configuration;
using System.Collections.Generic;
using System.Web.Script.Serialization;
public class Search_CS : IHttpHandler {
public void ProcessRequest(HttpContext context)
{
string UserData = System.Configuration.ConfigurationManager.AppSettings.Get("Base");//connection
string prefixText = context.Request.QueryString["term"];
using (SqlConnection conn = new SqlConnection(UserData))
{
using (SqlCommand cmd = new SqlCommand())
{
cmd.CommandText = "select * from Fruits where name like @SearchText + '%'";
cmd.Parameters.AddWithValue("@SearchText", prefixText);
cmd.Connection = conn;
List<string> customers = new List<string>();
conn.Open();
using (SqlDataReader sdr = cmd.ExecuteReader())
{
while (sdr.Read())
{
customers.Add(string.Format("{0}-{1}", sdr["name"], sdr["Id"]));
}
}
conn.Close();
context.Response.Write(new JavaScriptSerializer().Serialize(customers));
}
}
}
public bool IsReusable
{
get
{
return false;
}
}
}
