<script type="text/javascript">
$(document).ready(function () {
$('.category').on('change', function () {
var category_list = [];
$('#list :input:checked').each(function () {
var category = $(this).val();
category_list.push(category);
});
if (category_list.length == 0)
$('.resultblock').fadeIn();
else {
$('.resultblock').each(function () {
var item = $(this).attr('data-tag');
if (jQuery.inArray(item, category_list) > -1)
$(this).fadeIn('slow');
else
$(this).hide();
});
}
});
});
</script>
<script type="text/javascript">
function funPopup() {
$('#myModal').modal('show');
};
function funCloseRevel() {
$('#myModal').modal('hide');
$(".modal-backdrop").removeClass()
};
</script>
<script type="text/javascript">
function filter(element) {
var value = $(element).val();
$("#list > li").each(function () {
if ($(this).text().search(value) > -1) {
$(this).show();
}
else {
$(this).hide();
}
});
}
</script>
<script type="text/javascript">
$(".resultblock").click(function () {
var item = $(this).attr('ColorID');
$("input:checked").each(function () {
$(this).prop("checked", false);
});
});
</script>
<body>
<form id="form1" runat="server">
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="basicModal"
aria-hidden="true">
<div class="modal-dialog" style="width: 55%;">
<div class="modal-content">
<div id="Div1" runat="server" visible="false">
<table>
<tr>
<td rowspan="2">
<div class="container card">
<label class="text">
Color</label>
<asp:TextBox ID="txtnames" class="textbox" runat="server" placeholder="Search Color"
onkeyup="filter(this)" />
<ul id="list" runat="server" style="list-style-type: none;">
</ul>
<div id="filters" runat="server">
</div>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<div class="searchresults" runat="server" id="resultdata">
</div>
</td>
</tr>
<tr>
<td colspan="2">
<div id="sugg" runat="server" visible="false">
</div>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<asp:Button ID="Button1" runat="server" Text="ViewMore" OnClick="Button1_Click" />
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
fillcolor();
// fillcolors();
}
}
public void fillcolor()
{
string str = string.Empty;
string str1 = string.Empty;
string result = string.Empty;
clsColor objcolor = new clsColor(true);
clsColorProduct objProduct = new clsColorProduct(true);
objcolor.getColor();
for (int i = 0; i < objcolor.ListclsColor.Count; i++)
{
str += "<li><div class='filterblock'><input type='checkbox' id=" + objcolor.ListclsColor[i].ColorID + " name='check' value=" + objcolor.ListclsColor[i].ColorName + " class='category'><div class='font'><div class='Color' style=background-color:" + objcolor.ListclsColor[i].ColorCode + "></div></div><label class='font' for=" + objcolor.ListclsColor[i].ColorID + ">" + objcolor.ListclsColor[i].ColorName + "</label></div></li>";
if (objcolor.ListclsColor[i].ColorID != 0)
{
str1 += "<td><div class='resultblock' ColorID=" + objcolor.ListclsColor[i].ColorID + " data-tag=" + objcolor.ListclsColor[i].ColorName + "><div class='desc'><div class='desc_text'><div class='main'><div class='sub'><div class='box'>" + objcolor.ListclsColor[i].ColorName + "<span class=''><img height='10px' style='margin-left: 4px;margin: 0px 0px -1px 4px;'/></span></div></div></div></div></div></div></td>";
objProduct.getColorp();
for (int j = 0; j < objProduct.ListclsColorProduct.Count; j++)
{
if (objcolor.ListclsColor[i].ColorID == objProduct.ListclsColorProduct[j].ColorID)
{
result += "<td><div class='resultblock' data-tag=" + objcolor.ListclsColor[i].ColorName + "><div class='desc'><div class='desc_text'><img width='100px' src='" + ConfigurationManager.AppSettings["path"].ToString() + "Product_Color/Product_Color/a/" + objProduct.ListclsColorProduct[j].ProductID + "/" + objProduct.ListclsColorProduct[j].ProductID + ".jpg" + "' alt='" + objProduct.ListclsColorProduct[j].ProductName + @"' /></div></div></div></td>";
sugg.Visible = true;
}
}
}
}
list.InnerHtml = str;
filters.InnerHtml = result;
sugg.InnerHtml = str1;
}
protected void Button1_Click(object sender, EventArgs e)
{
Div1.Visible = true;
}
