0

I have defined a lookup field with multiple values over a contact list inside my SP 2013 team site, and by default I got a select list as follow:-

enter image description here

So is there a way to have the lookup field with autocomplete capabilities instead of the default select list?

Thanks

  • 1
    OOB there isn't any, but you can use JavaScript to build your own. – Arsalan Adam Khatri Jun 3 '15 at 12:22
  • @ArsalanAdamKhatri i use autocomplete when i build .net applications,, but not sure how i can write an autocomplete inside my New & Edit forms to read its data from a sharepoint list .... can you advice more on this? – john Gu Jun 3 '15 at 12:38
  • I am not sure if this can be helpful autocompletelookupsp2013.codeplex.com but still sharing it with you. – Asad Refai Jun 23 '15 at 9:50
3

You cannot do it OOTB. You need to use JSLink,SPService or Jquery for that

You can get some reference from Autocomplete with SPServices

Hope it will help you.

  • but will this approach allow to have multiple selections ? similar to the built-in People or Group which have auto complete capabilities? – john Gu Jun 3 '15 at 14:19
  • so from the link you provide i have 4 options; SPClientAutoFillcontrol, Search, JSLink, Jquery autocomplete,, but seems the jquery autocomplete will not allow multiple selection and the search approach is seems very complicated and can not re-use ,, can you adivce ? – john Gu Jun 3 '15 at 14:38
  • You can find jquery for multi select dropdown – Kalpesh Vaghela Jun 3 '15 at 14:39
  • does this work for SharePoint can you adivce more please ? – john Gu Jun 3 '15 at 14:50
3

@johnG For autocomplete capability you can use jQuery as said by Kalpesh Vaghela

To retrieve list items from a SharePoint list, you can use Client Object Model for JavaScript

Reference : https://msdn.microsoft.com/en-us/library/office/hh185007(v=office.14).aspx#sectionSection0

Better not to use web services (recommended by Microsoft)

Reference : https://msdn.microsoft.com/en-us/library/office/jj164060.aspx#DeprecatedAPIs

  • so seems the Client Object Model will allow to select multiple values which is great,, but i did not use this before,, so how i can have this scripting capability within my site collection ,, i mean the jsScript will have predefined objects such as "SP.ClientContext(siteUrl);" etc which is not understandable by the standard jquery is this correct? – john Gu Jun 3 '15 at 14:30
  • also the link you provide regarding the COM is for SP 2010 while i am using SP 2013,, can you adivce on this please? – john Gu Jun 3 '15 at 14:34
  • 1
    ya will work for SP2013 also and can you give a try for multi select with auto complete at jqueryrain.com/?Bxwy2bPt – Chandrakanth Jun 3 '15 at 14:52
  • 1
    All the references related to SP.ClientContext which is just JavaScript are by default added in the SharePoint site – Chandrakanth Jun 3 '15 at 15:09
  • thanks for the link , but will jqueryrain.com/?Bxwy2bPt works in sharepoint ? as seems it is a general jquery plugin, not designed for SharePoint is this correct ? – john Gu Jun 3 '15 at 16:13
2

Here's a complete implementation of jQuery autocomplete for a normal input box with contents from a sharepoint list.

<script src="http://YOURSITEHERE/jquery.js"></script>
<script src="http://YOURSITEHERE/jquery-ui.js"></script>
<script type="text/javascript">

var SITE_URL = "http://YOURSITEHERE/";
var LIST_NAME = "MyList"; 
var listArray = [];
$( "<<id of your input control to autocomplete>>" ).autocomplete({
    source: listArray
});
$(document).ready(function() {
    var soapEnv =
        "<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'> \
            <soapenv:Body> \
                 <GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'> \
                    <listName>"+ LIST_NAME + "</listName> \
                    <viewFields> \
                        <ViewFields> \

 <!-- Here is where you put the fields to retrieve -->
                           <FieldRef Name='Title' /> \  
                       </ViewFields> \
                    </viewFields> \
                </GetListItems> \
            </soapenv:Body> \
        </soapenv:Envelope>";

    $.ajax({
        url: SITE_URL + "/_vti_bin/lists.asmx",
        type: "POST",
        dataType: "xml",
        data: soapEnv,
        complete: processResult,
        contentType: "text/xml; charset=\"utf-8\""
    });
});


 function processResult(xData, status) {
    $(xData.responseXML).find("z\\:row").each(function() {
        var listValues = $(this).attr("ows_Title");
        listArray.push(listValues);
    });
}
</script> 
  • ,, but could your script be extended to work inside a site template, as what i currently doing is that i am saving a subsite as Template, then users will create subsites based on the template. so how i can make the SITE_URL parameter more dynamic in a way to be equal to the current subsite url ,, could i get it from the current browser url .. – john Gu Jun 3 '15 at 14:08
  • i forgot to mention that i need the look-up to allow multiple values is this possible ? – john Gu Jun 3 '15 at 14:10
  • You could use the following using client object model var clientContext = new SP.ClientContext(); var owebsite = clientContext.get_site.get_rootWeb(); Without client object model you can use the following var siteCollectionPath= _spPageContextInfo.siteServerRelativeUrl; – Ransher Singh Jun 3 '15 at 14:16
  • Lookup for multiple values is a bit tricky (since you also need to be able to remove as well as add items), I will let someone else answer that – Ransher Singh Jun 3 '15 at 14:17
  • so the script will not allow multiple selection .. is this correct ? – john Gu Jun 3 '15 at 14:18
0

Hope the below code will help.

//Remove the option from possible values and adding to selected values
var eachOption = $('[title="Customer Risk Owner possible values"]').children('[value="contact2"]')[0];                              
eachOption.remove();                            
$('[title="Customer Risk Owner selected values"]').append(eachOption);


//There is one hidden input field to store the selected values.
//Its value attribute is in a special format
var valueStringOfSelectedItems;

$("[title='Customer Risk Owner selected values'] option").each(function()
{
                if(valueStringOfSelectedItems)
                {
                    valueStringOfSelectedItems+="|t"+$(this).val()+"|t"+this.title;
                }
                else
                {
                    valueStringOfSelectedItems = $(this).val()+"|t"+this.title;
                }
});


            //Selected values are added to its value attribute
            $("input[id^='Customer_x0020_Risk']").first().attr('value', valueStringOfSelectedItems);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.