How to use jquery chosen to create a new people selector in SharePoint

Based on SharePoint platform development, the people selector usage is very high, but the native staff selector is too cumbersome, and very clumsy, very unfriendly, especially for the old man in the government department, to let them manually input personnel, is simply wishful thinking. In a word, the simpler the better.

In order to make customers satisfied, we must change the personnel selector, the original peopleeditor completely abandoned. Can only find a new way, look for the appropriate jquery plug-ins, create a fresh staff selector, analyze the requirements, can be summed up the new staff selector must support the following:

Support staff, such as meetings, notifications need to send more people, of course, to support the deletion.

For the person selector for the radio, you can delete the selected person.

Regardless of radio or multiple selection, support Jquey autocomplete indexing function.

Find out, find jquery chosen function is very powerful, fully meet my needs, more features refer to chosen official website:

http://harvesthq.github.io/chosen/

Using jquery chosen to transform

Multiple selection of people selectors

Support multiple selection, click X to uncheck, of course, also support the index, as follows:

Configuration is also very simple, first of all you have a select, such as:

 <asp:dropdownlist runat= "Server" clientidmode= "Static" id= Ddlpeoplechosen "data-placeholder=" Select Attendees ... "class=" Chzn-select "multiple style=" WIDTH:397PX; "></asp:DropDownList>

Note: The data-placeholder means that the default text when the person is not selected, multiple mean support for multiple selections.

Next, you need to add a data source to it, and note that for a single person selector, the chosen author says that if you want to display the default text hint, you need to add an empty option to the select (the first one).

Note: My staff is not taken out of the ad, but we have a store list (personnel file), in order to ensure that the list of personnel can log into OA, deliberately and web.alluser comparison, of course, can also not be necessary to do insurance points.

The public static void Getfromcache (SPWeb _currentweb) {#region read from the cache if (System.Web.HttpCon Text.
                current.cache["peoplelist"] = = null) {//people collection: joins the user in SharePoint as a data source collection in DropDownList
                list<people> peoplelist = new list<people> (); 
                Note:on single Selects, the ' the ' the ' the ' assumed to be selected by the browser. To take advantage of the default text support,//you'll need to include a blank option as the
                Lement of your select list.
                Peoplelist.add (New People ());
                People p = null; SPList employeelist = _currentweb.site.allwebs["Rsgl"].
                Lists["Personnel files"];
                Get all users who can access the site spusercollection usercollection = _currentweb.allusers; Convert to List collection list<spuser> listusers = usercollection.cast<spuser> ().
                ToList (); ForeaCH (splistitem item in Employeelist.items) {string displayName = item["Title"].
                    Tostringorempty (); Recycling facilitates getting SPUser foreach (spuser user in listusers) {if (di Splayname = = user. Name) {string loginName = user.
                            LoginName;
                            p = New People {LoginName = LoginName, DisplayName = DisplayName};
                        Peoplelist.add (P); }} system.web.httpcontext.current.cache["Peoplelist" = people
            List; } #endregion}

Next is the binding to the DropDownList:

Peoplehelper.getfromcache (_currentweb);
            var Peoplelistfromcache = (list<people>) system.web.httpcontext.current.cache["Peoplelist"];
            Participants
            Ddlpeoplechosen.datasource = Peoplelistfromcache;
            Ddlpeoplechosen.datatextfield = "DisplayName";
            Ddlpeoplechosen.datavaluefield = "LoginName";
            Ddlpeoplechosen.databind ();

After you have the data source, add the chosen JS to the client and add the following script: