Facebook and Linkedin like Searching Funcationality in Asp.net mvc 4
Hi friends,
In the last month, i came across to implement doctors searching my application like the one facebook or linkedin is using, i googled to find some plugin but when it failed i thought to made my own using jquery.
Here is the screen shot of my work:
Here i go:
Here is my input control:
Here is jquery code:
and Here is my server side Action Code:
Here is my Web Service code which returns doctor's name and picture:
Cheers............:D
I hope you like it.......;)
Thanks.
In the last month, i came across to implement doctors searching my application like the one facebook or linkedin is using, i googled to find some plugin but when it failed i thought to made my own using jquery.
Here is the screen shot of my work:
Here i go:
Here is my input control:
<div class="search_input"><input type="text" id="people" placeholder="Search for specialist doctors and more.." /> </div>
Here is jquery code:
<script type="text/javascript"> $(document).ready(function () { var drew = false; $("#people").on("keyup", function (event) { var query = $("#people").val(); if ($("#people").val().length >= 1) { $('div#loaderContainer').show(); $.ajax({ url: '@Url.Action("Search","SearchPathologist")', dataType: "json", data: { term: query, flag: "all" }, error: function() { $.fallr('show', { content: '<p>Error occured! May be your session expired.</p>' }); }, success: function (data) { $('div#loaderContainer').hide(); //First search if (drew == false) { //Create list for results $("#people").after("<ul id='res' class='ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all' role='listbox' aria-activedescendant='ui-active-menuitem' style='z-index: 10005; display: block; width: 293px;'></ul>"); //Prevent redrawing/binding of list drew = true; //Bind click event to list elements in results $("#res").on("click", "li.item", function () { $("#people").val($(this).text()); $("#res").empty(); }); } //Clear old results else { $("#res").empty(); } $.each(data.doctors, function (i, item) { if(i==0) { $("#res").append("<div id='doctors'></div>") $("#doctors").append("<li style='background: linear-gradient(to bottom, #499BEA 0%, #207CE5 100%) repeat scroll 0 0 rgba(0, 0, 0, 0); margin-left:2px;text-align:center;color:white;'>Doctors</li>"); } $("#doctors").append("<li class='item'><div style='width:100%; margin:auto; background:white; min-height:20px;'><div style='border-bottom:1px dashed gray;'><div style='float:left; width:16%; min-height:35px; margin:auto;'><img src='http://olivecliq.com/carepoint/doctor_images/"+item.ImageName+"' width='31px' style='margin-top:4px; margin-left:1px;' /></div><div class='mid_card'><h2> " + item.DoctorName + "</h2><h3></h3></div><div style='float:left;width:10%; min-height:25px; margin:auto;'> <img src='@Url.Content("~/images/arrow.png")' width='25' style='margin-top: 10px;' /></div><div style='clear:both;'></div></div></li>"); }); $.each(data.connections, function (i, item) { if(i==0) { $("#res").append("<div id='connections'></div>") $("#connections").append("<li style='background: linear-gradient(to bottom, #499BEA 0%, #207CE5 100%) repeat scroll 0 0 rgba(0, 0, 0, 0); margin-left:2px;text-align:center;color:white;'>Connections</li>"); } $("#connections").append("<li class='item'><div style='width:100%; margin:auto; background:white; min-height:20px;'><div style='border-bottom:1px dashed gray;'><div style='float:left; width:16%; min-height:35px; margin:auto;'><img src='http://olivecliq.com/carepoint/doctor_images/"+item.ImageName+"' width='31px' style='margin-top:4px; margin-left:1px;' /></div><div class='mid_card'><h2> " + item.ConnectionName + "</h2><h3></h3></div><div style='float:left;width:10%; min-height:25px; margin:auto;'> <img src='@Url.Content("~/images/arrow.png")' width='25' style='margin-top: 10px;' /></div><div style='clear:both;'></div></div></li>"); }); if($('button#searchDDL').html() == "Doctors") { $('div#connections').hide(); } if($('button#searchDDL').html() == "Connections") { $('div#doctors').hide(); } } }); } else { $("#res").empty(); $( "#res" ).remove(); drew = false; } }); $("input#people").focusout(function () { $( "#res" ).remove(); drew = false; }); }); </script>
and Here is my server side Action Code:
public JsonResult Search(string term, string flag) { using (OliveCliqService.OliveServiceClient client = new OliveCliqService.OliveServiceClient()) { PathWay.OliveCliqService.SearchResult result = new PathWay.OliveCliqService.SearchResult(); result = client.Search(Session["userID"].ToString(), term, flag); return Json(result,JsonRequestBehavior.AllowGet); } }
Here is my Web Service code which returns doctor's name and picture:
public SearchResult Search(string PersonID,string term,string flag) { string cmd; string connectionString = System.Configuration.ConfigurationManager.ConnectionStrings["OliveCliq"].ConnectionString; MySqlConnection con = new MySqlConnection(connectionString); con.Open(); cmd = @"SELECT DISTINCT d.DoctorID, d.FirstName, d.LastName, d.Image, r.name, s.Spaciality_name, oc.clinic_name, cb.Location, rpd.acronym FROM cloud_clinic.doctor_members dm LEFT OUTER JOIN cloud_clinic.doctors d on dm.member_id = d.doctorid LEFT OUTER JOIN cloud_clinic.clinic_doctor_designations cdd on d.doctorid = cdd.doctor_id LEFT OUTER JOIN cloud_clinic.rm_pr_designations de on cdd.designation_id = de.designationid LEFT OUTER JOIN cloud_clinic.doctor_spcialities ds on d.doctorID = ds.doctorid LEFT OUTER JOIN cloud_clinic.spaciality s on ds.spacialityID = s.id LEFT OUTER JOIN cloud_clinic.clinic_doctor_departments dd on dm.member_id = dd.doctor_id LEFT OUTER JOIN cloud_clinic.rm_pr_departments r on dd.department_id = r.departmentid LEFT OUTER JOIN cloud_clinic.clinic_doctors cd on dm.member_id = cd.DoctorID LEFT OUTER JOIN cloud_clinic.clinic_branches cb on cd.clinic_branch_id = cb.branch_id LEFT OUTER JOIN cloud_clinic.clinics oc on cb.clinic_id = oc.id LEFT OUTER JOIN cloud_clinic.doctor_education dee on dm.member_id = dee.doctorid LEFT OUTER JOIN cloud_clinic.rm_pr_degrees rpd on dee.degreeid = rpd.degreeid where dm.doctor_id = '" + PersonID + "' And d.FirstName like '" + term + "%' group by d.DoctorID LIMIT 5"; MySqlDataAdapter da = new MySqlDataAdapter(cmd, con); DataSet ds = new DataSet(); da.Fill(ds); SearchResult result = new SearchResult(); //List<string> listTest = new List<string>(); List<Doctor> doctorList = new List<Doctor>(); List<Connection> connectionList = new List<Connection>(); for (int i = 0; i < ds.Tables[0].Rows.Count; i++) { //string test = ds.Tables[0].Rows[i]["TestName"].ToString(); Connection objConnection = new Connection(); objConnection.ConnectionID = ds.Tables[0].Rows[i]["DoctorID"].ToString(); objConnection.ConnectionName = ds.Tables[0].Rows[i]["FirstName"].ToString() + " " + ds.Tables[0].Rows[i]["LastName"].ToString(); objConnection.ImageName = ds.Tables[0].Rows[i]["Image"].ToString(); //objConnection.Type = "Connection"; connectionList.Add(objConnection); } con.Close(); cmd = @"SELECT DISTINCT d.DoctorID, d.FirstName, d.LastName, d.Image FROM cloud_clinic.doctors d where (d.FirstName like '"+term+"%') and (d.DoctorID not in ( select dm.member_id FROM cloud_clinic.doctor_members dm )) LIMIT 5"; con.Open(); MySqlDataAdapter da1 = new MySqlDataAdapter(cmd, con); DataSet ds1 = new DataSet(); da1.Fill(ds1); //List<string> listTest = new List<string>(); // List<Doctor> doctorList = new List<Doctor>(); for (int i = 0; i < ds1.Tables[0].Rows.Count; i++) { //string test = ds.Tables[0].Rows[i]["TestName"].ToString(); Doctor objDoctor = new Doctor(); objDoctor.DoctorID = ds1.Tables[0].Rows[i]["DoctorID"].ToString(); objDoctor.DoctorName = ds1.Tables[0].Rows[i]["FirstName"].ToString() + " " + ds1.Tables[0].Rows[i]["LastName"].ToString(); objDoctor.ImageName = ds1.Tables[0].Rows[i]["Image"].ToString(); objDoctor.Type = "Doctor"; doctorList.Add(objDoctor); } result.connections = connectionList; result.doctors = doctorList; return result; }
Cheers............:D
I hope you like it.......;)
Thanks.
