Convert apex:inputField of lookup relationship into slds

Question

The slds page: https://www.lightningdesignsystem.com/components/lookups/#flavor-single-active has the examples of doing a perfect lookup input.

The sample code of typeahead is this:

<div class="slds-form-element slds-lookup slds-is-open" data-select="single">
    <label class="slds-form-element__label" for="lookup-366">Account Name</label>
    <div class="slds-form-element__control">
        <div class="slds-input-has-icon slds-input-has-icon--right">
            <svg aria-hidden="true" class="slds-input__icon">
                <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#search"></use>
            </svg>
            <input id="lookup-366" class="slds-lookup__search-input slds-input" type="search" placeholder="Search Accounts" aria-owns="lookup-366" role="combobox" aria-activedescendent="" aria-expanded="true" aria-autocomplete="list" value="salesforce" />
        </div>
    </div>
    <div class="slds-lookup__menu" id="lookup-366">
        <ul class="slds-lookup__list" role="listbox">
            <li role="presentation">
                <span class="slds-lookup__item-action slds-lookup__item-action--label" id="lookup-option-368" role="option">
                    <svg aria-hidden="true" class="slds-icon slds-icon--x-small slds-icon-text-default">
                        <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#search"></use>
                    </svg>
                    <span class="slds-truncate" title="{ props.text || &#x27;New Account&#x27; }">&quot;salesforce&quot; in accounts</span>
                </span>
            </li>
            <li role="presentation">
                <span class="slds-lookup__item-action slds-media slds-media--center" id="lookup-option-369" role="option">
                    <svg aria-hidden="true" class="slds-icon slds-icon-standard-account slds-icon--small slds-media__figure">
                        <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
                    </svg>
                    <div class="slds-media__body">
                        <div class="slds-lookup__result-text">
                            <mark>Salesforce</mark>.com, Inc.</div>
                        <span class="slds-lookup__result-meta slds-text-body--small">Account • San Francisco</span>
                    </div>
                </span>
            </li>
            <li role="presentation">
                <span class="slds-lookup__item-action slds-lookup__item-action--label" id="lookup-option-370" role="option">
                    <svg aria-hidden="true" class="slds-icon slds-icon--x-small slds-icon-text-default">
                        <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#add"></use>
                    </svg>
                    <span class="slds-truncate" title="{ props.text || &#x27;New Account&#x27; }">New Account</span>
                </span>
            </li>
        </ul>
    </div>
</div>

However, despite this long piece of code, I am still confused by several things:

1. the value selected by this will be the name of the SObject record, instead of Id.
2. How should I implement the New Account functionality? Should it be a page redirection or dialog? LEX is using dialog. However, I find it difficult to implement that way. And page redirection just don't seem that correct.

Any suggestions?

Answer 1

I think you are looking for the JS Lightning framework such as :

• Appyphony Lightning JS (example below)
• Lightningdart

Now for the New Account that's a bit up to your case. LEX is using dialog so that the user can stay on the same form and populate automatically the lookup dialog. I find that more responsive and a good way to go. At the end of the day your new Account should be a separated Lightning Component and you should be able to reuse this component as a separated page or embed in a dialog(modal).

I hope you will find that helpful

For example (Appiphony):

$(document).ready(function() {
$('#lookup-01').lookup({
    items: [
        {
            id: 'result-1',
            label: 'Result 1'
        },
        {
            id: 'result-2',
            label: 'Result 2'
        },
        {
            id: 'result-3',
            label: 'Result 3'
        },
        {
            id: 'result-4',
            label: 'Result 4'
        }
    ],
});

var results = [
    {
        id: 'ajax-result-1',
        label: 'ajaxResult1'
    },
    {
        id: 'ajax-result-2',
        label: 'ajaxResult2'
    },
    {
        id: 'ajax-result-3',
        label: 'ajaxResult3'
    },
    {
        id: 'ajax-result-4',
        label: 'ajaxResult4'
    }
];

$('#lookup-02').lookup({
    items: results,
    objectPluralLabel: 'Things',
    objectLabel: 'Thing',
    useImgTag: false,
    objectIconUrl: '/assets/icons/standard-sprite/svg/symbols.svg#account',
    objectIconClass: 'slds-icon-standard-account',
    emptySearchTermQuery: function(callback) {
        callback(results);
    },
    filledSearchTermQuery: function(searchTerm, callback) {
        callback(results.filter(function(result) {
            return result.label.match(searchTerm) !== null;
        }));
    },
    initialSelection: { id: 'ajax-result-1', label: 'ajaxResult1' },
    clickAddFunction: function() {
        console.log('redirect or do something to add something');
    }
});
});