We have developed an application for SharePoint document management for one of our customers. Users can manage documents from different SharePoint libraries. In order to simplify the use of the application, we have implemented a new search functionality. This allows a user to filter by meta data of the document, such as the document title. We also implemented a document content search, which searches the entire contents of the document for the typed text.

Creating a ComboBox component

We implemented the graphical interface in the application using an SPFx application. For the search functionality, we have created our own ComboBox component in order to be able to offer the user search suggestions. This made it easier to use the new search functionality, because we limit the filter values to the possible values already when entering the search term. The user has the possibility to select a search suggestion by either clicking on the search suggestion directly or by navigating with the arrow keys to the desired suggestion and confirming it with Enter. The filter is now applied and we only represent documents in the list that correspond to the selected filter. Applied filters are highlighted by a frame to immediately detect which filters have already been set.

 

ComboBox for search suggestions
ComboBox for search suggestions

Asynchronous loading of search suggestions

We always apply all selected filters in combination to the documents. Therefore, we asynchronously reload the search suggestions every time we click into the filter field to really only suggest the possible filter values. To load the possible filter values, we first get all the fields of the SharePoint list. Then we iterating through the items in the SharePoint list that match the filters already selected. In doing so, we store all possible filter values in an array, which is finally assigned to the ComboBox. The ComboBox renders these filter values as search suggestions in a drop-down, which can be selected.

If you have any further questions about our search functionality, simply write us a comment or contact us.