具有下拉菜单和预输入项的输入字段

时间:2019-03-08 10:56:04

标签: angularjs angular-ui-bootstrap

我一直在网上寻找解决方案,但是这些解决方案都不符合我的需求。

我想要的是一个包含带有值的下拉列表的控件,用户可以通过按字段中的典型箭头按钮选择显示和选择一个值,在该字段中键入内容也可以显示下拉列表和根据输入过滤其中的值。

因此,就angular-ui-bootstrap术语而言,它是一个input/select元素,带有typeahead

对我来说,这是正常下拉字段的工作方式,但我找不到任何实现方式。

有些实现可以在焦点对准字段时显示弹出式标题弹出窗口,等等。但是,我觉得如果用户在聚焦于正常输入字段时弹出弹出窗口,这对于用户来说很奇怪。

这可能吗?

1 个答案:

答案 0 :(得分:0)

您可以使用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>

有关更多详细信息,请检查here