How to populate a dropdown options from server based on the text typed in input?

1

I would like to implement a semantic-ui dropdown module with options populated from collection field from server based on the text typed in input? Most of the client side UI can be done using semantic-ui apis, refer below:

dropdown menu

$(’.remote.example .ui.dropdown’)
.dropdown({
apiSettings: {
url: ‘//api.semantic-ui.com/tags/{query}’
}
})
;

I am not sure about the searching part? Can anyone suggest how?

2

You can use Semantic-UI’s API function for the Dropdown, like so (Disclaimer: haven’t actually checked it works):

    $(el).dropdown({
      apiSettings: {
        responseAsync: function(settings, callback) {
          const query = settings.urlData.query;
          // Generate your response, this is what Semantic-UI expects:
          var response = {
            success: true,
            results: [
              {
                name: 'Choice A',
                value: 'valueA'
              },
              {
                name: 'Choice B',
                value: 'valueB'
              }
            ]
          };
          callback(response);
        }
      }
    });
2 Likes
3

Thanks for the info. I will give it a try.