Filtering Dropdown Control

Forms SharePoint Online
1

Any suggestions on how to do a filtering dropdown control?

I need to provide a list of 700+ items but this is too long for the page to load. I was hoping I can allow the user to type in the dropdown control and when they get to at least 3 characters in length, do the search and populate the dropdown. Unfortunately, it turns out that you can't type in the dropdown control.

Any idea on how to get something like this?

2

Hello @smithme,

You can use the lookup field instead of a dropdown. Lookup fields allows filtering based on the value that user types in the field.

1 Like
3

The lookup field would have to be able to reach a list on a separate SharePoint. Is the cross-site lookup still the best way to do that?

4

I just reactivated our cross-site lookup license but it appears I can't lookup the list data:

From:
https://cityofnampaid.sharepoint.com/sites/City

To:
https://cityofnampaid.sharepoint.com/sites/HR

So, how can I lookup data from City and show it in a list on HR. I started with PnPJS but there are to many employees than can be loaded in one go. I need to filter the lookup as the user types the name.

5

Hello @smithme,

I'm sorry for the delayed reply, we were on holiday.

Cross-site lookup column works only within the same site collection.

You can try out to populate a dropdown field with the values from another list. You can find the example and the instructions here:
https://plumsail.com/docs/forms-sp/how-to/populate-dropdowns.html

And for filtering, you can add a TextBox field from the common field section which will filter the array of the values on change. Please see the code sample below.

let web = new Web('Site URL');
web.lists.getByTitle('List Name').items
    .select('Title')
    .get()
    .then(function(items) {
        var valuesArray = [];
        items.forEach(function (element) {
                valuesArray.push(element.Title);
       });

       var pat = fd.field('TextBox0').value;
        filtered = valuesArray.filter(function (str) { return str.includes(pat); });

        fd.field('DropDown0').widget.setDataSource({
                data: filtered
        });
   });
2 Likes
6

I wanted to pass along that I adapted the following article with the PNPJS. It looks great.

https://www.w3schools.com/howto/howto_js_autocomplete.asp

1 Like