How to create a Searchable Lookup Fields in SharePoint NEWFORM?

Question

I've been tasked to have master data for the workforce. The list creates and added as a list with over 2000 records. hence, I've created another list to get the calculated column from the master list. 

when I select the Personnel ID it gives me a long list as a dropdown menu. which is very hard to figure out.  So, I'm seeking your help for javascript that work in Sharepoint 2013-2019 to be added as script editor in (NEWFORM)

• MasterSheet Name : Manpower
• MasterSheet Colmn Name: Personnel No

---

the other list that I want to configure :

• List Name: Test
• Colmn Name: Personnel No

Answer 1

To perform a searchable column in SharePoint 2016 new form using JS, I think you have to use jQuery SPServices

Your JScode in Script Editor Web Part should be something like this

<script language="javascript" src="//code.jquery.com/jquery-1.6.2.min.js" type="text/javascript"></script>
<script language="javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2014.02/jquery.SPServices-2014.02.min.js" type="text/javascript"></script>

<script type="text/javascript">
    $(document).ready(function () {

        $().SPServices.SPAutocomplete({

            sourceList: "< Source List Name >", // Source List Name
            sourceColumn: "Title", // Source List Column from where you want to fetch it.
            columnName: "DestinationListColumn", // Destination List Column where you want to add it.
            ignoreCase: true,
            numChars: 2,
            slideDownSpeed: 50,
           debug: true
        });

});
</script>

Note: sourceColumn should be the internal name of the column, not the displayname

See Also

• SharePoint Auto Populate Column based on another Column
• Auto Populate Field Values based on Lookup Selection In SharePoint

Comments

Thank yo very much, i did the above script but not working its gives me message :

Error in Function
SPServices. SPAutocomplete
ColumnName: Personnel No
Message
Column is not an input control or is not found on page

script used:

<script type="text/javascript">
    $(document).ready(function () {

        $().SPServices.SPAutocomplete({

            sourceList: "< Manpower >", // Source List Name
            sourceColumn: "Title", // Source List Column from where you want to fetch it.
            columnName: "Personnel No", // Destination List Column where you want to add it.
            ignoreCase: true,
            numChars: 2,
            slideDownSpeed: 50,
           debug: true
        });

});
</script>

---

As mentioned in the answer, you should use the Internal name for your column? Have you done this?

---

Greetings Mohammed, Yes i did it the  internal name is "Title"

the Manpower list was got from Excel Sheet using the Import Spreadsheet app and then the employee id was placed in Title field.

thanks.