Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Trim newlines from options #1142

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
Open

Trim newlines from options #1142

wants to merge 6 commits into from

Conversation

HeIIow2
Copy link

@HeIIow2 HeIIow2 commented Feb 15, 2024 •
edited

Description

  1. updated node version, because it was ancient
  2. added the option to source the choices from choices like div element

This should make it easy to "solve" this #1127

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
    <title>Choices</title>

    <link rel="icon" type="image/png" href="assets/images/favicon-32x32.png" sizes="32x32" />


    <link rel="stylesheet" href="assets/styles/base.min.css" />

    <link rel="stylesheet" href="assets/styles/choices.min.css" />
    <script src="assets/scripts/choices.js"></script>
  </head>

<body>
  <script>
    Choices.defaults.options.allowHTML = true;
  </script>

  <div class="container section">
      <select
        class="form-control"
        name="select-single"
        id="select-single"
        placeholder="This is a search placeholder"
      >
      </select>

      <div>
        <div class="choices-single">
          <div value="" disabled selected>This is a single select</div>
          <div value="Choice 1">Choice 1 <div class="pill-badge">1</div></div>
          <div value="Choice 2">Choice 2 <div class="pill-badge">foo</div></div>
          <div value="Choice 3">Choice 3 <div class="pill-badge">bar</div></div>
        </div>
      </div>

      <select
        class="form-control select-multiple"
        name="choices-single-allow-html"
        id="select-multiple"
        placeholder="This is a search placeholder"
        multiple
      >
      </select>

      <div class="choices-multiple">
        <div value="Choice 1">Choice 1 <a>1</a></div>
        <div value="Choice 2">Choice 2 <a>foo</a></div>
        <div value="Choice 3">Choice 3 <a>bar</a></div>
      </div>
  </div>

  <script>
    new Choices('#select-single', {
      choicesContainer: '.choices-single',
    });

    const multiple = document.querySelector('.choices-multiple');
    console.log(multiple, multiple instanceof HTMLElement);
    new Choices('#select-multiple', {
      shouldSort: false,
      searchResultLimit: 10,
      removeItemButton: true,
      choicesContainer: multiple,
    });
  </script>

</body>
</html>

Screenshots (if appropriate)

Types of changes

  • Chore (tooling change or documentation change)
  • Refactor (non-breaking change which maintains existing functionality)
  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)

Checklist

  • My code follows the code style of this project.
  • I have added new tests for the bug I fixed/the new feature I added.
  • I have modified existing tests for the bug I fixed/the new feature I added.
  • My change requires a change to the documentation.
  • I have updated the documentation accordingly.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
1 participant
@HeIIow2