Question

我有一个输入和用户列表。此输入是一个搜索框，因此每次我输入输入时，它都会自动更改用户列表。我如何实现在用户列表中总是选择一个，最好是第一个列表项，然后如果我将鼠标悬停在其他选定的更改上并离开我最后一次徘徊的位置。这是我的HTML代码：

<div class="user-container">
    <input class="form-control user-search" placeholder="Search by name" type=“text">
    <div id="userList">
        <ul>
                <li>
                    Bob
                </li>
                <li>
                    Charlie
                </li>
                <li>
                    Foxtrot
                </li>
        </ul>
    </div>
</div>

这需要javascript，因为我想知道哪个被选中。所以我可以得到它的数据。在更改选择时也可以使用向上和向下键。不必是一个有效的代码。也许只是帮助我修改逻辑并给我一些伪代码。

Answer 1

尝试使用css :hover，:not()

＆＃13;

ul li:hover {
  background: grey;
}
ul:hover li:first-child:not(:hover) {
  background: transparent;
}
ul li:nth-of-type(1) {
  background: grey;
}

＆＃13;

<div class="user-container">
  <input class="form-control user-search" placeholder="Search by name" type="text"/>
  <div id="userList ">
    <ul>
      <li>
        Bob
      </li>
      <li>
        Charlie
      </li>
      <li>
        Foxtrot
      </li>
    </ul>
  </div>
</div>

＆＃13;

Answer 2

明智的另一种方法js ......

创建一个css类

.selected{
   /* css for selected class */
}

在页面加载时，将其添加到first-child

$("some-first-child").addClass("selected")

从remove上方选择任何其他类li并将其添加到新的li类。

要设置默认值，您可以在html body

中搜索此类

如果$('body').hasClass没有返回true，您可以随时将其添加回第一个li孩子。

Answer 3

Jquery搜索

$("input").on('input', function() {

  var val = $(this).val().toUpperCase();

  $("#userList li").each(function() {

    if ($(this).text().trim().toUpperCase().indexOf(val) > -1) {
      $(this).show();
    } else {
      $(this).hide();
    }

  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="user-container">
  <input class="form-control user-search" placeholder="Search by name" type="text">
  <div id="userList">
    <ul>
      <li>
        Bob
      </li>
      <li>
        Charlie
      </li>
      <li>
        Foxtrot
      </li>
    </ul>
  </div>
</div>

Answer 4

你想要这样。

<style>
    .active{
        background: gray;
    }
</style>

<script src="//code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
            $("ul li").mouseover(function(){
               $("ul li").removeClass("active");
               $(this).addClass('active');
            });
    });
</script>

<div class="user-container">
    <input class="form-control user-search" placeholder="Search by name" type=“text">
    <div id="userList">
        <ul style="width:100px;">
            <li class="active">
                Bob
            </li>
            <li>
                Charlie
            </li>
            <li>
                Foxtrot
            </li>
            <li>
                Bob
            </li>
            <li>
                Charlie
            </li>
            <li>
                Foxtrot
            </li>
            <li>
                Bob
            </li>
            <li>
                Charlie
            </li>
            <li>
                Foxtrot
            </li>
        </ul>
    </div>
</div>

上下键工作..我正在等待这个。

始终在列表中选择一个<li>

4 个答案: