Как сфокусироваться bootstrap выбрать сборщик - PullRequest
Новая
       8

Как сфокусироваться bootstrap выбрать сборщик

0 голосов
/ 19 февраля 2020

Я использую data-live-search для поиска. Когда я нажимаю на кнопку фокуса, она должна снова выбрать фокус. Я использую следующий код 

$("#focus").click(function() {
  $(".selectpicker").focus();
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/css/bootstrap-select.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/js/bootstrap-select.js"></script>

<select data-live-search="true" data-live-search-style="startsWith" class="selectpicker">
  <option value="4444">4444</option>
  <option value="Fedex">Fedex</option>
  <option value="Elite">Elite</option>
  <option value="Interp">Interp</option>
  <option value="Test">Test</option>
</select>
<button id="focus">focus</button>

Всякий раз, когда я нажимаю, ввод фокусируется для выбора поля, но опция поиска не отображается. Я прикрепил снимок экрана При вводе подсказки, пожалуйста, укажите правильную опцию с опцией поиска

1 Ответ

2 голосов
/ 19 февраля 2020

focus() не работает, потому что он превратился в настроенную select не собственную опцию выбора, кстати, есть собственный способ сделать это в плагине selectpicker, событие под названием toggle

$("#focus").click(function() {
  // toggle
  $('.selectpicker').selectpicker('toggle');

  // select by value
  $('.selectpicker').selectpicker('val', 'Test');
  $('.remove-example').selectpicker('refresh');

  // change highlight
  $('.dropdown-menu li').removeClass('active')
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/css/bootstrap-select.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/js/bootstrap-select.js"></script>

<select data-live-search="true" data-live-search-style="startsWith" class="selectpicker">
  <option value="4444">4444</option>
  <option value="Fedex">Fedex</option>
  <option value="Elite">Elite</option>
  <option value="Interp">Interp</option>
  <option value="Test">Test</option>
</select>
<button id="focus">focus</button>
...