jQuery Chosen Plugin in SharePoint

jQuery Chosen Plugin in SharePoint

Step1: Create a custom list.

Step2: Create a choice column and select check boxes allow multiple selection.

Step3: Create NewForm1.aspx using Designer and make it default form.

Setp4: Edit and add below code and save NewForm1.aspx

Code:

Replace below code in NewForm1.aspx

Old code:

--------------------

<tr>

        <td width="190px" valign="top" class="ms-formlabel">

            <h3 class="ms-standardheader">

                <nobr>Choice</nobr>

            </h3>

        </td>

        <td width="400px" valign="top" class="ms-formbody">

            <SharePoint:FormField runat="server" id="ff2{$Pos}" ControlMode="New" FieldName="Choice" __designer:bind="{ddwrt:DataBind('i',concat('ff2',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@Choice')}" />

            <SharePoint:FieldDescription runat="server" id="ff2description{$Pos}" FieldName="Choice" ControlMode="New" />

        </td>

    </tr>

Updated code:

--------------------

<tr>

            <td width="190px" valign="top" class="ms-formlabel">

                <h3 class="ms-standardheader">

                    <nobr>Choice</nobr>

                </h3>

            </td>

            <td width="400px" valign="top" class="ms-formbody">

                <table>

                    <tr>

                        <td>

                            <div id="divChoice"></div>

                        </td>

                    </tr>

                    <tr>

                        <td id="tdChoice">

                            <SharePoint:FormField runat="server" id="ff2{$Pos}" ControlMode="New" FieldName="Choice" __designer:bind="{ddwrt:DataBind('i',concat('ff2',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@Choice')}" />

                            <SharePoint:FieldDescription runat="server" id="ff2description{$Pos}" FieldName="Choice" ControlMode="New" />

                        </td>

                    </tr>

                </table>

            </td>

        </tr>

Replace below code also.

Old code:

--------------------

<asp:content contentplaceholderid="PlaceHolderAdditionalPageHead" runat="server">

    <sharepoint:delegatecontrol runat="server" controlid="FormCustomRedirectControl" allowmultiplecontrols="true" />

    <sharepoint:uiversionedcontent uiversion="4" runat="server">

        <contenttemplate>

            <sharepoint:cssregistration name="forms.css" runat="server" />

        </contenttemplate>

    </sharepoint:uiversionedcontent>

</asp:content>

Updated code:

--------------------

<asp:content contentplaceholderid="PlaceHolderAdditionalPageHead" runat="server">

    <sharepoint:delegatecontrol runat="server" controlid="FormCustomRedirectControl" allowmultiplecontrols="true" />

    <sharepoint:uiversionedcontent uiversion="4" runat="server">

        <contenttemplate>

            <sharepoint:cssregistration name="forms.css" runat="server" />

        </contenttemplate>

    </sharepoint:uiversionedcontent>

    <!--<link rel="stylesheet" href="/sites/dev/SiteAssets/Chosen/chosen.min.css"/>

    <script type="text/javascript" src="/sites/dev/SiteAssets/Chosen/jquery.min.js"></script>

    <script type="text/javascript" src="/sites/dev/SiteAssets/Chosen/chosen.jquery.min.js"></script>

    <script type="text/javascript" src="/sites/dev/SiteAssets/Chosen/chosen.proto.min.js"></script>-->

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.2/chosen.min.css" />

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.2/chosen.jquery.min.js"></script>

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.2/chosen.proto.min.js"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            buildChosen();

            $("#selectChoice").chosen().change(function () {

                var selectedItemsChoice = $(this).val();

                $("#tdChoice td").each(function (index) {

                    $(this).find(':checkbox').prop('checked', false);

                    for (var i = 0, len = selectedItemsChoice.length; i < len; i++) {

                        if ($(this).text().trim() == selectedItemsChoice[i].trim()) {

                            $(this).find(':checkbox').prop('checked', true);

                        }

                    }

                });

            });

            $("#tdChoice").hide();

        });

        function buildChosen() {

            htmlChoice = '<select  class="Choice" multiple="multiple" id="selectChoice">';

            $("#tdChoice td").each(function (index) {

                if ($(this).find(':checkbox').prop('checked')) {

                    htmlChoice += "<option value='" + $(this).text() + "' selected='selected'>" + $(this).text() + "</option>";

                } else {

                    htmlChoice += "<option value='" + $(this).text() + "'>" + $(this).text() + "</option>";

                }

            });

            $('#divChoice').html(htmlChoice);

            $('#selectChoice').chosen({ width: "400px" });

        }

    </script>

</asp:content>

Step5: 

Test the application. Click on Create new item from ribbon in list.

before update code:

--------------------

After update code:

--------------------

jQuery Chosen Plugin

jQuery Chosen Plugin

HTML File:

----------------

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta charset="utf-8" />

    <title></title>

    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.css" />

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

    <script src="http://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.jquery.js"></script>

    <script>

     var arrValues;

        $(document).ready(function () {

            $html = '<select  class="html-multi-chosen-select1" multiple="multiple" id="myselect">';

            $html += '<option value="1">one</option>';

            $html += '<option value="2">two</option>';

            $html += '<option value="3">three</option>';

            $html += '<option value="4">four</option>';

            $html += '</select>';

            $('#divMain').html($html);

            $('.html-multi-chosen-select1').chosen({ width: "210px" });

            $("#btnRead").click(function () {

                var arrValues = $("#myselect").chosen().val();

                $("#lblValues").html(arrValues.toString());

                console.log(arrValues);

                for (var i = 0, len = arrValues.length; i < len; i++) {

                    console.log(arrValues[i]);

                }

            });         

            $("#btnSetValue").click(function () {

                 $('.html-multi-chosen-select1').val('2');

                 $('.html-multi-chosen-select1').trigger('chosen:updated');

            });         

        });

    </script>

</head>

<body>

    <div id="divMain"></div>

    <button type="button" id="btnRead">Read Values</button>

    <button type="button" id="btnSetValue">Set value 2</button><br>

    <label id="lblValues"></label>

</body>

</html>

 OutPut:

------------