Semantic-ui: Improvements suggestions for the dropdown component

[davialexandre]

I'm currently developing an application that have a lot of entities associations where both sides of the relationship have a large number of items. Because of this, I'm using remote dropdowns to show these entities. Specifically I'm using Select2.

I would love to remove the Select2 dependency and use the dropdown component for everything, but it still don't have some of the features that I need. I think these features would be nice improvements to the component:

Different templates/visualizations for the item
In some scenarios, it may be useful to have one template for when the item is displayed in the open dropdown and another for when it is selected and the dropdown is closed:

This can be partially achieved by customizing the dropdown templates, but since the label template don't have access to the received json data it is almost impossible to make it work for the closed dropdown.

Retrieve the selected item data
Sometimes, the loaded data has much more information than what is displayed by the dropdown. The data used by the last example is something like this:

It would be very useful to be able to retrieve the json object for the selected item. I'm thinking of something like:

var selected_item = $('.dropdown').dropdown('selected item');
console.log(selected_item.cidade); // Would log "BOM JESUS"

I did some tests locally and I don't think it would be hard to implement this. If you agree that these are features worth implementing, I could make a PR

[jlukic]

You can specify the text that should appear in label using data-text on the item. This is not compatible with dropdowns auto-generated from <select>

[projecttalk-issuebot]

Hi, thanks for posting your question.

Unfortunately, GitHub issues is specifically for bug reports and feature requests.

Since this post does not fit into that category, it has been moved to ProjectTalk boards, a special board specifically for usage questions.

Please check out our contributing guide to learn how to modify your post so that it might be appropriate for a bug tracker.

If you want to be notified about an answer, please go to http://www.projecttalk.io/boards/Semantic-Org%2FSemantic-UI/topics/21 and set your email preferences.

[kmd1970]

There is a workaround for custom dropdown templates.

Define your custom menu template:

var customMenu =  function(response, fields) {
    var values = response[fields.values] || {},
      html   = ''
    ;
    $.each(values, function(index, option) {
      html += '<div class="item" data-text="' + option[fields.label] + '" data-value="' + option[fields.value] + '"><div class="header">' + option[fields.name] + '</div><div class="meta"><span>' + option[fields.title] + '</span></div><div class="extra">' + option[fields.email] + '</div></div>';
    });
    return html;
  };

Then using the (undocumented) templates attribute override the default menu.

$('.ui .dropdown') .dropdown({
    templates : {
       menu : customMenu
    } 
});