Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Set Placeholder for empty <options>

See original GitHub issue

Hello @leocaseiro, thanks for the great work here.

I noticed a difference between how angular-chosen and the original library handles selects with no valid options inside:

Plain chosen library: https://plnkr.co/edit/QqUPZGgmiUkFEpVgYkZF?p=preview

angular-chosen version: https://plnkr.co/edit/o9w6SOCHtcE7sNih9ttS?p=preview

If you pay attention you’ll notice that angular-chosen changes the placeholder to the no-results-text once it’s empty.

To keep the original behavior I had to comment this part of the library.

updateMessage = function() {
  // if (empty) {
  //   element.attr('data-placeholder', chosen.results_none_found).attr('disabled', true);
  // } else {
  //   element.removeAttr('data-placeholder');
  // }
  return element.trigger('chosen:updated');
};

Is it something intentional? Do you have any suggestions on how to fix it without commenting this?

Thanks again

Issue Analytics

State:
Created 7 years ago
Comments:9 (5 by maintainers)

Top GitHub Comments

1reaction

dfmedeiroscommented, Mar 17, 2017

@leocaseiro - Yeah, that’s exactly the problem. I’ll take a shot once I have some free time. Thanks again!

0reactions

leocaseirocommented, Mar 17, 2017

Hi @dfmedeiros, I think I understood what you mean.

You don’t want to show “No results match” by default, only after a search. But before that, it should show the placeholder because the options are empty.

PS: I took this library with this feature that way already, I’m happy to add a new option for “no-options-text” if you’d like to add to it. I’m accepting PR’s

Top Results From Across the Web

How do I make a placeholder for a 'select' box? - Stack Overflow

Note: Using an empty value attribute on the "placeholder" option allows validation (required attribute) to work around having the "placeholder", so if the ......

How to Create a Placeholder for an HTML5 <select> Box

First, you need to create your select items with the help of the <option> tag. Then, set the disabled and selected attributes for...

Placeholders - The jQuery replacement for select boxes

Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and pagination (infinite scrolling) of results.

Placeholder only works when there's an empty option element

This is clearly a bug. If there's no option element with the selected attribute, then the first element is selected even when a...

How to Make a Placeholder for a Select Box in HTML

However, you can create similar effect by using the HTML disabled and selected attribute on a <option> element that has empty value.