Facebook and Linkedin like Searching Funcationality in Asp.net mvc 4
Udemy

Facebook and Linkedin like Searching Funcationality in Asp.net mvc 4

Friday, December 20, 2013 2 Comments A+ a-

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:




<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.
Coursera - Hundreds of Specializations and courses in business, computer science, data science, and more
Ehsan Sajjad

2 comments

Write comments
Arslan Elahi
AUTHOR
December 20, 2013 at 7:44 AM delete

Good work dude... keep it up

Reply
avatar
Ehsan Sajjad
AUTHOR
December 20, 2013 at 7:58 AM delete

thanks for appreciating...:)

Reply
avatar

Subscribe to: Post Comments (Atom)