Adding Auto-complete to Lookup Fields - search/select dropdowns

ArdeviaForum

• Created August 19, 2016 15:30

Original Post by KeithP (Imported from Ardevia Forum)

We have some lookup fields on our forms that contain many items.  I want to make it easier on the users by allowing them to use some sort of "search select" like Select2  or Chosen.js

 

I found these examples below of how to incorporate some javascript functions into SharePoint lists, but I`m not sure how to do it / if it would work with Ardevia forms using Office 365.

 

Select2 JQuery Plugin used in a SharePoint form – JSLink | Mark Daunt – Web/Mobile Software Development & Audio

 

Herve 2.0: A "Smart Drop-Down" for SharePoint

 

2013 - Autocomplete Lookup - Finding the Best Approach - SharePoint Stack Exchange

 

Thanks!

0

• 

  ArdeviaForum

  • August 19, 2016 18:31

  Original Post by Taras Lozynskyy (Imported from Ardevia Forum)

  Hi .
  Please look at the following article.
  You need you add Script Editor Web Part, and insert your fields template rendering script in it, like this one:

  Code:

  <script type="text/javascript">
  function MyFieldControl(ctx) {
    // Instead of hardcoding the field value, we can fetch it from the context
  var fieldInternalName = ctx.CurrentFieldSchema.Name;
  var controlId = fieldInternalName + "_control";
  
    // Initialization of the field: here I'm attaching onchange event to my control,
    // so that whenever text is changed, FormContext.updateControlValue is executed.
    ctx.FormContext.registerInitCallback(fieldInternalName, function () {
  
        $addHandler($get(controlId), "change", function(e) {
            ctx.FormContext.updateControlValue(fieldInternalName, $get(controlId).value);
        });
  
    });
  
    return '<input type="text" id="'+controlId+ '" name="'+controlId+'" class="my-input"  />';
  }
      // here is template rendering registration for Title filed
  SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
    Templates: {
      Fields: {
        'Title': {
  EditForm: MyFieldControl,
  NewForm: MyFieldControl
        }
      }
   }
    });
  </script>
  

  0

Please sign in to leave a comment.