Skip to content

JQuery Autocomplete

Victor Tomaili edited this page May 3, 2021 · 1 revision

#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;
     	}
    
     }
     }
    
Clone this wiki locally