Is it possible to have a lookup field with autocomplete feature

Question

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:-

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

Thanks

Answer 1

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.

Answer 2

@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

Answer 3

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> 

Answer 4

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);