SharePoint Online Lookup Dropdown Autocomplete/Combobox

%3CLINGO-SUB%20id%3D%22lingo-sub-1431030%22%20slang%3D%22en-US%22%3ESharePoint%20Online%20Lookup%20Dropdown%20Autocomplete%2FCombobox%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1431030%22%20slang%3D%22en-US%22%3E%3CP%3EHi%20All%2C%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20have%20a%20list%20in%20Sharepoint%20Online%2C%20which%20has%20a%20lookup%20to%20an%20other%20list.%20No%20matter%20what%2C%20on%20the%20form%20it%20will%20always%20render%20as%20a%20dropdown%20value.%20When%20this%20list%20of%20values%20becomes%20huge%2C%20it's%20hard%20to%20find%20the%20correct%20item%20in%20the%20dropdown.%3C%2FP%3E%3CP%3ETherefore%20I%20want%20to%20implement%20something%20like%20this%3A%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3CA%20href%3D%22http%3A%2F%2Fjqueryui.com%2Fautocomplete%2F%23combobox%22%20rel%3D%22nofollow%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%20target%3D%22_blank%22%3Ehttp%3A%2F%2Fjqueryui.com%2Fautocomplete%2F%23combobox%3C%2FA%3E%3C%2FP%3E%3CP%3EThis%20will%20allow%20to%20type%20in%20the%20lookup%20field%20and%20find%20the%20correct%20item%20easily.%20Is%20this%20possible%20and%20how%20can%20I%20implement%20this%3F%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EKind%20regards%2C%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1433269%22%20slang%3D%22en-US%22%3ERe%3A%20SharePoint%20Online%20Lookup%20Dropdown%20Autocomplete%2FCombobox%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1433269%22%20slang%3D%22en-US%22%3E%3CP%3EHi%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F630674%22%20target%3D%22_blank%22%3E%40Sadok_Hadji%3C%2FA%3E%2C%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EIt's%20definitely%20possible%20using%20SPFx.%20You%20can%20create%20a%20custom%20dropdown%20-%20maybe%20even%20that%20one%20using%20jQuery%20-%20querying%20data%20from%20your%20list%20and%20then%20filtering%20them%20as%20the%20user%20types%20a%20value.%20If%20you%20want%20your%20control%20to%20be%20available%20in%20the%20%22New%22%20or%20%22Edit%22%20Form%2C%20when%20you%20create%20or%20edit%20an%20item%20through%20SharePoint%2C%20I%20think%20you'd%20have%20to%20use%20PowerApps.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1433463%22%20slang%3D%22en-US%22%3ERe%3A%20SharePoint%20Online%20Lookup%20Dropdown%20Autocomplete%2FCombobox%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1433463%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F630674%22%20target%3D%22_blank%22%3E%40Sadok_Hadji%3C%2FA%3E%26nbsp%3BI'd%20use%20Power%20Apps%20where%20you%20can%20have%20a%20text%20box%20where%20you%20start%20entering%26nbsp%3B%20a%20name%20and%20the%20gallery%20gets%20filtered%20as%20you%20type.%20That's%20what%20I%20did%20in%20my%20ISO%20Airports%20Database%20app%20which%20has%20many%20thousands%20of%20items%20in%20a%20SharePoint%20list%3B%20you%20start%20typing%20the%20name%20of%20the%20country%20and%20the%20gallery%20gets%20filtered%20automatically%20with%20airports%20in%20the%20country%20with%20those%20starting%20letters.%20In%20my%20app%20you%20can%20also%20start%20typing%20the%20name%20of%20an%20airprt%20and%20the%20same%20thing%20happens.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-center%22%20image-alt%3D%22startTyping.png%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F195911i4C33B9DFE981E10D%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20title%3D%22startTyping.png%22%20alt%3D%22startTyping.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ERob%3CBR%20%2F%3ELos%20Gallardos%3CBR%20%2F%3E%3CFONT%20size%3D%222%22%20color%3D%22%23333399%22%3EMicrosoft%20Power%20Automate%20Community%20Super%20User%3C%2FFONT%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1433498%22%20slang%3D%22en-US%22%3ERe%3A%20SharePoint%20Online%20Lookup%20Dropdown%20Autocomplete%2FCombobox%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1433498%22%20slang%3D%22en-US%22%3EThis%20cannot%20be%20done%20without%20code.%20If%20you%20can%20only%20use%20native%20InfoPath%2C%20there%20is%20no%20type-ahead%20functionality%20for%20combo-box%20or%20drop-downs.%3CBR%20%2F%3E%3CBR%20%2F%3EIf%20this%20is%20a%20list%20form%2C%20you%20will%20not%20be%20able%20to%20use%20code%20behind%20at%20all.%20You%20may%20get%20some%20traction%20with%20a%20JavaScript%20approach.%20Start%20with%20this%20blog%20post%20that%20explains%20the%20process%20using%20Marc%20Anderson's%20SPServices%20on%20the%20web%20page%20where%20the%20form%20displays%3A%3CBR%20%2F%3E%3CBR%20%2F%3E%3CA%20href%3D%22http%3A%2F%2Fbutdoesitwork.typepad.com%2Fbut_does_it_work%2F2011%2F08%2Finfopath-and-autocomplete-and-other-lessons.html%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttp%3A%2F%2Fbutdoesitwork.typepad.com%2Fbut_does_it_work%2F2011%2F08%2Finfopath-and-autocomplete-and-other-lessons.html%3C%2FA%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1433511%22%20slang%3D%22en-US%22%3ERe%3A%20SharePoint%20Online%20Lookup%20Dropdown%20Autocomplete%2FCombobox%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1433511%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F493704%22%20target%3D%22_blank%22%3E%40Lewis-H%3C%2FA%3E%26nbsp%3Bas%20the%20original%20poster%20is%20using%20Sharepoint%20Online%20I%20assume%20(though%20I%20might%20be%20wrong)%20that%20he%20has%20access%20to%20Power%20Apps%20which%20has%20replaced%20InfoPath%20-%20you%20can't%20use%20Infopath%20on%20a%20modern%20SharePoint%20Online%20site%20in%20Office%20365.%20Hence%20my%20suggestion%20to%20use%20Power%20Apps%20where%20what%20s%2Fhe%20wants%20to%20do%20can%20be%20done%20quite%20easily.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ERob%3CBR%20%2F%3ELos%20Gallardos%3CBR%20%2F%3E%3CFONT%20size%3D%222%22%20color%3D%22%23333399%22%3EMicrosoft%20Power%20Automate%20Community%20Super%20User%3C%2FFONT%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E
Highlighted
Occasional Contributor

Hi All,

 

I have a list in Sharepoint Online, which has a lookup to an other list. No matter what, on the form it will always render as a dropdown value. When this list of values becomes huge, it's hard to find the correct item in the dropdown.

Therefore I want to implement something like this: http://jqueryui.com/autocomplete/#combobox

This will allow to type in the lookup field and find the correct item easily. Is this possible and how can I implement this?

 

Kind regards,

4 Replies
Highlighted

Hi @Sadok_Hadji,

 

It's definitely possible using SPFx. You can create a custom dropdown - maybe even that one using jQuery - querying data from your list and then filtering them as the user types a value. If you want your control to be available in the "New" or "Edit" Form, when you create or edit an item through SharePoint, I think you'd have to use PowerApps.

Highlighted

@Sadok_Hadji I'd use Power Apps where you can have a text box where you start entering  a name and the gallery gets filtered as you type. That's what I did in my ISO Airports Database app which has many thousands of items in a SharePoint list; you start typing the name of the country and the gallery gets filtered automatically with airports in the country with those starting letters. In my app you can also start typing the name of an airprt and the same thing happens.

 

startTyping.png

 

Rob
Los Gallardos
Microsoft Power Automate Community Super User

Highlighted
This cannot be done without code. If you can only use native InfoPath, there is no type-ahead functionality for combo-box or drop-downs.

If this is a list form, you will not be able to use code behind at all. You may get some traction with a JavaScript approach. Start with this blog post that explains the process using Marc Anderson's SPServices on the web page where the form displays:

http://butdoesitwork.typepad.com/but_does_it_work/2011/08/infopath-and-autocomplete-and-other-lesson...
Highlighted

@Lewis-H as the original poster is using Sharepoint Online I assume (though I might be wrong) that he has access to Power Apps which has replaced InfoPath - you can't use Infopath on a modern SharePoint Online site in Office 365. Hence my suggestion to use Power Apps where what s/he wants to do can be done quite easily.

 

Rob
Los Gallardos
Microsoft Power Automate Community Super User