function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Leafen SandyLeafen Sandy 

Lookup field in lightning view in vf page

Hi,

I want to have lookup field in vf page that has to be with lightning view and the way it works should be exactly how it works in lightning i.e., should drop down the record list with filtering and not like opening a new window as in classic view.

For this I tried with the code got from http://aljs.appiphony.com/#!/lookups

 
<apex:page showHeader="false" standardStylesheets="false">

<apex:stylesheet value="{!URLFOR($Resource.slds, 'assets/styles/salesforce-lightning-design-system.css')}"/>
<apex:stylesheet value="{!URLFOR($Resource.slds, 'assets/styles/salesforce-lightning-design-system.min.css')}"/>
<apex:includeScript value="https://code.jquery.com/jquery-2.2.4.min.js" /> 
<apex:form >


<!--
<apex:repeat value="{!directors}" var="dirKey">
        <apex:outputText value="{!dirKey}" /> -- 
        <apex:outputText value="{!directors[dirKey]}" /><br/>
</apex:repeat> 

--->

<script>

$(document).ready(function() {
    $('#lookup-01').calllist({
        items: [
            {
                id: 'result-1',
                label: 'Result1',
                metaLabel: 'Optional' 
            },
            {
                id: 'result-2',
                label: 'Result2',
                metaLabel: 'Optional'
            },
            {
                id: 'result-3',
                label: 'Result3',
                metaLabel: 'Optional' 
            },
            {
                id: 'result-4',
                label: 'Result4',
                metaLabel: 'Optional'
            },
            
        ],
    });

    var resultsForSecondLookup = [
        {
            id: 'ajax-result-1',
            label: 'AJAX Result 1',
            metaLabel: 'Optional meta description'
        },
        {
            id: 'ajax-result-2',
            label: 'AJAX Result 2',
            metaLabel: 'Optional meta description'
        },
        {
            id: 'ajax-result-3',
            label: 'AJAX Result 3',
            metaLabel: 'Optional meta description'
        },
        {
            id: 'ajax-result-4',
            label: 'AJAX Result 4',
            metaLabel: 'Optional meta description'
        }
    ];

    $('#lookup-02').againnow({
        items: resultsForSecondLookup,
        objectPluralLabel: 'Things',
        objectLabel: 'Thing',
        useImgTag: false,
        objectIconUrl: '/assets/icons/standard-sprite/svg/symbols.svg#account',
        objectIconClass: 'slds-icon-standard-account',
        initialSelection: { id: 'ajax-result-1', label: 'AJAX Result 1' },
        onClickNew: function() {
            console.log('redirect or run something');
        }
    });
});

</script>

<div class="slds-form-element slds-lookup" data-select="single" data-scope="single">
    <label class="slds-form-element__label" for="lookup-01">Objects</label>
    <div class="slds-form-element__control slds-input-has-icon slds-input-has-icon--right">
        <svg aria-hidden="true" class="slds-input__icon slds-icon-text-default">
     <!--        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#search"></use>-->
           <use href="{!URLFOR($Resource.sldssc,'/assets/icons/utility-sprite/svg/symbols.svg#search')}"></use>
        </svg>
        <input id="lookup-01" class="slds-lookup__search-input slds-input" type="text" aria-autocomplete="list" role="combobox" aria-expanded="false" aria-activedescendant="" placeholder="Search Objects"/>
    </div>
</div>
<div class="slds-form-element slds-lookup" data-select="single" data-scope="single">
    <label class="slds-form-element__label" for="lookup-02">Things</label>
    <div class="slds-form-element__control slds-input-has-icon slds-input-has-icon--right">
        <svg aria-hidden="true" class="slds-input__icon slds-icon-text-default">
          <!--  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#search"></use>-->
            <use href="{!URLFOR($Resource.sldssc, '/assets/icons/utility-sprite/svg/symbols.svg#search')}"></use>
        </svg>
        <input id="lookup-02" class="slds-lookup__search-input slds-input" type="text" aria-autocomplete="list" role="combobox" aria-expanded="false" aria-activedescendant="" placeholder="Search Things"/>
    </div>
</div>
</apex:form>
</apex:page>


The above is as such taken from the site(values statically given).

For which I'm getting script errors like lookup function not defined.

Kindly someone let me know is there anything that has to be changed here.

Thanks,
Leafen Sandy.