Поле ввода с выпадающим списком и заголовком - PullRequest
1 голос
/ 08 марта 2019

Я искал в Интернете решение этой проблемы, но ни одно из решений не вполне соответствует моим потребностям.

Мне нужен элемент управления, содержащий раскрывающийся список со значениями, которые пользователь может выбрать для отображения.и выберите значение, нажав обычную кнопку со стрелкой в ​​поле, и при вводе чего-либо в поле также отобразится раскрывающийся список и отфильтрованы значения в нем в соответствии с вводом.

Итак, с точки зрения терминологии angular-ui-bootstrap, это input/select -элемент с typeahead.

Для меня это то, как должно работать нормальное выпадающее поле, но я могуне найти никакой реализации этого.

Есть несколько реализаций, которые показывают всплывающее окно с заголовком, когда поле сфокусировано, и т. д. Но я чувствую, что было бы странно для пользователя, если у него появилось всплывающее окно, когда они фокусируютсячто выглядит как обычное поле ввода.

Возможно ли это?

1 Ответ

0 голосов
/ 19 марта 2019

Вы можете использовать стиль SELECT2. Вы также можете выбрать значение, нажав на типичную кнопку со стрелкой в ​​поле, и где ввести что-то в поле

$(document).ready(function() {
    $('.js-example-basic-multiple').select2({
      placeholder: 'Select an option'
    });
});
select{
  width :200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<select class="js-example-basic-multiple" name="states[]" multiple="multiple">
  <optgroup label="Alaskan/Hawaiian Time Zone" data-select2-id="171">
    <option value="AK" data-select2-id="172">Alaska</option>
    <option value="HI" data-select2-id="173">Hawaii</option>
  </optgroup>
  <optgroup label="Pacific Time Zone" data-select2-id="174">
    <option value="CA" data-select2-id="175">California</option>
    <option value="NV" data-select2-id="176">Nevada</option>
    <option value="OR" data-select2-id="177">Oregon</option>
    <option value="WA" data-select2-id="178">Washington</option>
  </optgroup>
  <optgroup label="Mountain Time Zone" data-select2-id="179">
    <option value="AZ" data-select2-id="180">Arizona</option>
    <option value="CO" data-select2-id="181">Colorado</option>
    <option value="ID" data-select2-id="182">Idaho</option>
    <option value="MT" data-select2-id="183">Montana</option>
    <option value="NE" data-select2-id="184">Nebraska</option>
    <option value="NM" data-select2-id="185">New Mexico</option>
    <option value="ND" data-select2-id="186">North Dakota</option>
    <option value="UT" data-select2-id="187">Utah</option>
    <option value="WY" data-select2-id="188">Wyoming</option>
  </optgroup>
  <optgroup label="Central Time Zone" data-select2-id="189">
    <option value="AL" data-select2-id="190">Alabama</option>
    <option value="AR" data-select2-id="191">Arkansas</option>
    <option value="IL" data-select2-id="192">Illinois</option>
    <option value="IA" data-select2-id="193">Iowa</option>
    <option value="KS" data-select2-id="194">Kansas</option>
    <option value="KY" data-select2-id="195">Kentucky</option>
    <option value="LA" data-select2-id="196">Louisiana</option>
    <option value="MN" data-select2-id="197">Minnesota</option>
    <option value="MS" data-select2-id="198">Mississippi</option>
    <option value="MO" data-select2-id="199">Missouri</option>
    <option value="OK" data-select2-id="200">Oklahoma</option>
    <option value="SD" data-select2-id="201">South Dakota</option>
    <option value="TX" data-select2-id="202">Texas</option>
    <option value="TN" data-select2-id="203">Tennessee</option>
    <option value="WI" data-select2-id="204">Wisconsin</option>
  </optgroup>
  <optgroup label="Eastern Time Zone" data-select2-id="205">
    <option value="CT" data-select2-id="206">Connecticut</option>
    <option value="DE" data-select2-id="207">Delaware</option>
    <option value="FL" data-select2-id="208">Florida</option>
    <option value="GA" data-select2-id="209">Georgia</option>
    <option value="IN" data-select2-id="210">Indiana</option>
    <option value="ME" data-select2-id="211">Maine</option>
    <option value="MD" data-select2-id="212">Maryland</option>
    <option value="MA" data-select2-id="213">Massachusetts</option>
    <option value="MI" data-select2-id="214">Michigan</option>
    <option value="NH" data-select2-id="215">New Hampshire</option>
    <option value="NJ" data-select2-id="216">New Jersey</option>
    <option value="NY" data-select2-id="217">New York</option>
    <option value="NC" data-select2-id="218">North Carolina</option>
    <option value="OH" data-select2-id="219">Ohio</option>
    <option value="PA" data-select2-id="220">Pennsylvania</option>
    <option value="RI" data-select2-id="221">Rhode Island</option>
    <option value="SC" data-select2-id="222">South Carolina</option>
    <option value="VT" data-select2-id="223">Vermont</option>
    <option value="VA" data-select2-id="224">Virginia</option>
    <option value="WV" data-select2-id="225">West Virginia</option>
  </optgroup>
</select>

Для более подробной информации, пожалуйста, проверьте здесь

...