代码之家 › 专栏 › 技术社区 › AlexW

bootstrap 4/jquery-单击下拉菜单焦点放在输入上

bootstrap-4 jquery

AlexW · 技术社区 · 6 年前

$("#devSearch").keyup(function() {
  filter = $("#devSearch").val().toUpperCase()
  div = $("#devDropdown")
  a = div.find("a")
  for (i = 0; i < a.length; i++) {
    if (a[i].innerHTML.toUpperCase().indexOf(filter) > -1) {
      a[i].style.display = "";
    } else {
      a[i].style.display = "none";
    }
  }
});
$("#devDD").click(function(){
  alert('yes')
  $('#devSearch').focus();
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>


<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" id="devDD" href="#" role="button" aria-haspopup="true" aria-expanded="false">Devices</a>
    <div class="dropdown-menu dropdown-menu-fixed-height" id="devDropdown">
      <input class="form-control form-control-sm" type="text" placeholder="Search..." id="devSearch" style="width:8rem; margin:0 1rem">
      <a class="dropdown-item" href="#">All Entires</a>
      <a class="dropdown-item" href="#">Big bob</a>
      <a class="dropdown-item" href="#">Little bob</a>
      <a class="dropdown-item" href="#">Sausage</a>
      <a class="dropdown-item" href="#">Chicken</a>
      <span class="filter-results no-results">Oops, nothing found!<span>
    </div>
  </li>
</ul>

JS小提琴- https://jsfiddle.net/9k63htx4/36/

2 回复 | 直到 6 年前

gaetanoM 6 年前

你可以用 shown.bs.dropdown 而不是单击事件:

$("#devDD").on('shown.bs.dropdown', function(e){
       $('#devSearch').focus();
});

而且,你需要移动你的 id=“devDD” 给父母元素。

你的更新 fiddle

$("#devSearch").keyup(function() {
    filter = $("#devSearch").val().toUpperCase()
    div = $("#devDropdown")
    a = div.find("a")
    for (i = 0; i < a.length; i++) {
        if (a[i].innerHTML.toUpperCase().indexOf(filter) > -1) {
            a[i].style.display = "";
        } else {
            a[i].style.display = "none";
        }
    }
});
$("#devDD").on('shown.bs.dropdown', function(e){
    $('#devSearch').focus();
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>


<ul class="nav nav-tabs">
    <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
    </li>
    <li class="nav-item dropdown" id="devDD">
        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Devices</a>
        <div class="dropdown-menu dropdown-menu-fixed-height" id="devDropdown">
            <input class="form-control form-control-sm" type="text" placeholder="Search..." id="devSearch" style="width:8rem; margin:0 1rem">
            <a class="dropdown-item" href="#">All Entires</a>
            <a class="dropdown-item" href="#">Big bob</a>
            <a class="dropdown-item" href="#">Little bob</a>
            <a class="dropdown-item" href="#">Sausage</a>
            <a class="dropdown-item" href="#">Chicken</a>
      <span class="filter-results no-results">Oops, nothing found!<span>
        </div>
    </li>
</ul>

brae 6 年前

看起来像是 focus()

$('#devDD').click(function() {
    setTimeout(function() {
        $('#devSearch').focus(); 
    }, 150);
});

或者,由于搜索框是您唯一的输入,您可以使用 autofocus 属性:

<input class="form-control form-control-sm" type="text" 
   placeholder="Search..." id="devSearch" style="width:8rem; 
   margin:0 1rem" autofocus>