-
Notifications
You must be signed in to change notification settings - Fork 804
JQuery Autocomplete
#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.
-
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); } } }
-
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
-
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; } } }
Copyright © Serenity Platform 2017-present. All rights reserved.
Documentation | Serene Template | Live Demo | Premium Support | Issues | Discussions