How to use Lookup Field in LWC

Question

I have a custom LWC Page which is used as Public site.

On this lwc, I have a form to populate data in contact object. I have one custom object called school this is the look up filter field in Contact object.

When i tried to Use the School look up filter in my page, It doesn't display anything in the page. Is there anything which i have missed.Please guide me.

 <lightning-record-edit-form object-api-name="Contact">
 <div class="slds-text-align_center slds-m-around_x-small">
                                                    <label for="fieldid">School</label>
                                                    <lightning-input-field id="schoolId" required={required}
                                                        variant="label-hidden" field-name="School__c"
                                                        value={schoolValue} onchange={handleChange}>
                                                    </lightning-input-field>
                                                </div>
 </lightning-record-edit-form>

Answer 1

You need a custom lookup component. Below is one of the best open source implementation so far:

https://github.com/pozil/sfdc-ui-lookup-lwc

Answer 2

Since this is the first result I get when I search on the web, I want to point out that salesforce just implemented a solution for this:

https://developer.salesforce.com/docs/component-library/bundle/lightning-record-picker/documentation

In case the link is not working anymore, I quote:

The lightning-record-picker component allows you to search for a list of Salesforce Records that match search input. It uses the GraphQL wire adapter to search for records, displays the records, and allows the user to select a record.

This example creates a record picker component that searches for Account objects.

<lightning-record-picker
    label="Accounts"
    placeholder="Search Accounts..."
    object-api-name="Account"
>
</lightning-record-picker>

Filter The filter attribute specifies which records the component lists in the record picker. The value for filter is an object with a single property, criteria. criteria is an array with a list of filter criteria objects and an optional filterLogic property.

This example filters records where the "Site" field equals "Grenoble" or null, "SerialNumber__c" doesn't start with "PRD-", and "Status" doesn't equal "Closed".

const filter = {
    criteria: [
        {
            fieldPath: 'Site',
            operator: 'eq',
            value: `Grenoble`,
        },
        {
            fieldPath: 'Site',
            operator: 'eq',
            value: null,
        },
        {
            fieldPath: 'Status',
            operator: 'ne',
            value: 'Closed',
        },
        {
            fieldPath: 'SerialNumber__c',
            operator: 'like',
            value: 'PRD-%',
        },
        filterLogic: '(1 OR 2) AND NOT(4) AND 3'
    ];
}

<lightning-record-picker object-api-name="Account" filter={filter}>
</lightning-record-picker>

Filter Logic filterLogic is a string that defines logic for the set of filter criteria objects in the criteria array. If filterLogic is undefined, all criteria are applied with an AND logical operator by default. Valid operators are AND, OR, and NOT. AND has higher precedence than OR. Parentheses are supported.

Filter Criterion The filter criterion object defines the criteria for individual filters. These filters can be combined using logical operators in the criteria array.

The filter criterion object contains the following properties.

NAME	TYPE	DESCRIPTION
fieldPath (required)	string	The name of the field in the API to filter on. Spanning relationships is supported at one level (Account.Phone).
operator (required)	string	The filter operator. Can be any of the supported types and operators listed in the table below.
value (required)	string	The value to filter against. If using a date filter, see the following table for accepted values.