JQuery Autocomplete

wirble edited this page Oct 28, 2016 · 3 revisions
Clone this wiki locally

JQuery Autocomplete

This is meant to get you started using autocomplete and is not meant to be best practice. It was created in the hope that someone find it useful and is able to create a better version. Autocomplete is useful in helping user pull data from other web services. In this case, I am pulling data from Active Directory to pull additional employee data. I am pretty sure below can be done a lot better within Serene but I just don't know how. I am able to use this within Serene as follows.

  1. Within Modules folder, create another folder "ADLookup"

    namespace your.namespace
    {
    using My.ActiveDirectory;
    using System.Collections.Generic;
    using System.Web.Mvc;
    using Serenity.Services;
    
    
    [RoutePrefix("Services/ADLookup"), Route("{action}")]
    public partial class ADLookupController : Controller
    {
        //use by the javascript
        public virtual JsonResult AutoCompleteUserLookup(string term)
        {
            var user = new ADUser();//implement your own adlookup class or look at step 3
            var users = new List<ADUser>();
            if (!string.IsNullOrEmpty(term))
            {
                //custom AD lookup class
                users = user.GetByNameOrUserName(term);
            }
            return Json(users, JsonRequestBehavior.AllowGet);
        }
    }
    }
    
  2. Add in xxxxDialog.ts and xxxxEditorDialog.ts

    constructor() {
        super();
        $('[name=EmpNum]').autocomplete({
            minLength: 6,
            autoFocus: true,
    
            source: function (request, response) {
                $.ajax({
                    url: "/services/adlookup/autocompleteuserlookup", 
                    type: "POST",
                    dataType: "json",
                    data: { term: request.term },
                    success: function (data) {
                        response($.map(data, function (item) {//data needs to be array of objects
                            return { label: item.LastName + ", " + item.FirstName + " (" + item.Descriptions + ")", value: item.EmpNum + "|" + item.UserName + "|" + item.LastName + "|" + item.FirstName + "|" + item.EmailAddress + "|" + item.WorkPhone };//item is each item in array item.LastName
                        }))
    
                    }
                })
            },
            focus: function () {
                $(".ui-helper-hidden-accessible").hide();  //fix issue with the selected data showing up on webpage
                event.preventDefault();
    
                return false;
            }
        })
            .on('autocompleteselect', function (e, ui) { //fill in data after it had been selected
                var t = $(this),
    
                    label = (e.type == 'autocompleteresponse' ? ui.content[0].label : ui.item.label),
                    value = (e.type == 'autocompleteresponse' ? ui.content[0].value : ui.item.value);
    
                var adprop = value.split("|");
                //parse string adprop and assign it to your fields by name
                return false;
            });
    }//end constructor
    
  3. My ADUser class look like this but you can implement your own

    using System.Collections.Generic;
    using System.DirectoryServices.AccountManagement;
    using System.Linq;
    using System.Web;
    
    namespace your.namespace
    {
        public class ADUser
        {
        private void AdUser(){
            FoundNumberUser = 0;
    
        }
        public string EmpNum { get; set; }
    
        public string FirstName { get; set; }
    
        public string LastName {get;set;}
    
        public string FullName { get; set; }
    
        public string UserName { get; set; }
    
        public string EmailAddress { get; set; }
    
        public string WorkPhone { get; set; }
    
        public string SAM { get; set; }
    
    
        public string Descriptions { get; set; }
    
    
    
        //search by full name, user name and employeenumber
        public List<ADUser> GetByNameOrUserName(string Name)
        {
    
            List<ADUser> Users = new List<ADUser>();
            string LastName = string.Empty;
            string FirstName = string.Empty;
    
            if (Name.Contains(","))
            {//indicates last and first name
                LastName = Name.Split(',')[0].Trim();
                FirstName = Name.Split(',')[1].Trim();
            }
            else
            {
                LastName = Name;
            }
    
            // set up domain context
            using (PrincipalContext ctx = new PrincipalContext(ContextType.Domain))
            {
    
    
                UserPrincipal user = new UserPrincipal(ctx);
                if (LastName != "")
                    user.Surname = LastName;
                if (FirstName != "")
                    user.GivenName = FirstName;
                if (FirstName == "" && LastName == "")
                    return Users;
    
                // create your principal searcher passing in the QBE principal    
                PrincipalSearcher srch = new PrincipalSearcher(user);
    
                // find all matches
    
                Users = GetUsersProperties(srch);
                if (Users.Count == 0)
                {
                    ADUser User = new ADUser();
                    User = GetByUserName(LastName);
                    if (User.FoundNumberUser>0)
                        Users.Add(User);
                    else
                    {
                        //maybe it's emp number
                        //User = GetByEmpNum(LastName);
                        //if (User.FoundNumberUser > 0)
                        //    Users.Add(User);
                    }
    
    
                }
    
            }
            return Users;
        }
    
    }
    }