Jquery TokenInput - 不能 select 第一个带有光标的元素

Question

我有一张 bootstrap (v5.1.3) 卡片，其中包含使用 jQuery 的 TokenInput 的自动完成字段。

一切正常，但我似乎无法使用光标访问该字段的第一个元素。使用箭头和回车键时我可以访问它。当我删除卡外的输入字段时，它起作用了。我想知道为什么会发生这种情况以及如何解决这个问题？

<script type="text/javascript">
  $(document).ready(function() {
      $("#autocomplete").tokenInput([
          {id: 7, name: "Ruby"},
          {id: 11, name: "Python"},
          {id: 13, name: "JavaScript"},
          {id: 17, name: "ActionScript"},
          {id: 19, name: "Scheme"},
          {id: 23, name: "Lisp"},
          {id: 29, name: "C#"},
          {id: 31, name: "Fortran"},
          {id: 37, name: "Visual Basic"},
          {id: 41, name: "C"},
          {id: 43, name: "C++"},
          {id: 47, name: "Java"}
      ]);
  });
</script>

/* Example tokeninput style #2: Facebook style */
ul.token-input-list-facebook {
    overflow: hidden; 
    height: auto !important; 
    height: 1%;
    width: 400px;
    border: 1px solid #8496ba;
    cursor: text;
    font-size: 12px;
    font-family: Verdana;
    min-height: 1px;
    z-index: 999;
    margin: 0;
    padding: 0;
    background-color: #fff;
    list-style-type: none;
    clear: left;
}

ul.token-input-list-facebook li input {
    border: 0;
    width: 100px;
    padding: 3px 8px;
    background-color: white;
    margin: 2px 0;
    -webkit-appearance: caret;
}

li.token-input-token-facebook {
    overflow: visible; 
    height: auto !important; 
    height: 15px;
    margin: 3px;
    padding: 1px 3px;
    background-color: #eff2f7;
    color: #000;
    cursor: default;
    border: 1px solid #ccd5e4;
    font-size: 11px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    float: left;
    white-space: nowrap;
}

li.token-input-token-facebook p {
    display: inline;
    padding: 0;
    margin: 0;
}

li.token-input-token-facebook span {
    color: #a6b3cf;
    margin-left: 5px;
    font-weight: bold;
    cursor: pointer;
}

li.token-input-selected-token-facebook {
    background-color: #5670a6;
    border: 1px solid #3b5998;
    color: #fff;
}

li.token-input-input-token-facebook {
    float: left;
    margin: 0;
    padding: 0;
    list-style-type: none;
}

div.token-input-dropdown-facebook {
    position: absolute;
    width: 400px;
    background-color: #fff;
    overflow: hidden;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    cursor: default;
    font-size: 11px;
    font-family: Verdana;
    z-index: 1;
}

div.token-input-dropdown-facebook p {
    margin: 0;
    padding: 5px;
    font-weight: bold;
    color: #777;
}

div.token-input-dropdown-facebook ul {
    margin: 0;
    padding: 0;
}

div.token-input-dropdown-facebook ul li {
    background-color: #fff;
    padding: 3px;
    margin: 0;
    list-style-type: none;
}

div.token-input-dropdown-facebook ul li.token-input-dropdown-item-facebook {
    background-color: #fff;
}

div.token-input-dropdown-facebook ul li.token-input-dropdown-item2-facebook {
    background-color: #fff;
}

div.token-input-dropdown-facebook ul li em {
    font-weight: bold;
    font-style: normal;
}

div.token-input-dropdown-facebook ul li.token-input-selected-dropdown-item-facebook {
    background-color: #3b5998;
    color: #fff;
}

<html lang="en">
<head>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <script type="text/javascript" src="static/assets/js/jquery.tokeninput.js"></script>

  <link rel="stylesheet" href="static/assets/styles/token-input-facebook.css" type="text/css" />
  


</head>
<body>
  <div class="card">
    <div class="card-body">
      <input type="text" id="autocomplete" class="form-control" placeholder="Search...">
    </div>
  </div>
</body>
</html>

Answer 1

您的代码片段没有运行，但我对其进行了一些小的修改，因此它运行在一个片段中，它似乎对我来说工作正常（也就是说，我可以用光标单击第一项）。

这里唯一真正的区别是我将 configuration object 作为第二个参数传递给 tokenInput() 以确保将“facebook”附加到 css 类 .我还更改了输入的宽度，因此它可以与 bootstrap.

配合使用

我是不是漏掉了什么？

$(document).ready(function() {
  $("#autocomplete").tokenInput([{
      id: 7,
      name: "Ruby"
    },
    {
      id: 11,
      name: "Python"
    },
    {
      id: 13,
      name: "JavaScript"
    },
    {
      id: 17,
      name: "ActionScript"
    },
    {
      id: 19,
      name: "Scheme"
    },
    {
      id: 23,
      name: "Lisp"
    },
    {
      id: 29,
      name: "C#"
    },
    {
      id: 31,
      name: "Fortran"
    },
    {
      id: 37,
      name: "Visual Basic"
    },
    {
      id: 41,
      name: "C"
    },
    {
      id: 43,
      name: "C++"
    },
    {
      id: 47,
      name: "Java"
    }
  ], {
    theme: "facebook"
  });
});

/* Example tokeninput style #2: Facebook style */

ul.token-input-list-facebook {
  overflow: hidden;
  height: auto !important;
  height: 1%;
  width: 100%;
  border: 1px solid #8496ba;
  cursor: text;
  font-size: 12px;
  font-family: Verdana;
  min-height: 1px;
  z-index: 999;
  margin: 0;
  padding: 0;
  background-color: #fff;
  list-style-type: none;
  clear: left;
}

ul.token-input-list-facebook li input {
  border: 0;
  width: 100px;
  padding: 3px 8px;
  background-color: white;
  margin: 2px 0;
  -webkit-appearance: caret;
}

li.token-input-token-facebook {
  overflow: visible;
  height: auto !important;
  height: 15px;
  margin: 3px;
  padding: 1px 3px;
  background-color: #eff2f7;
  color: #000;
  cursor: default;
  border: 1px solid #ccd5e4;
  font-size: 11px;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  float: left;
  white-space: nowrap;
}

li.token-input-token-facebook p {
  display: inline;
  padding: 0;
  margin: 0;
}

li.token-input-token-facebook span {
  color: #a6b3cf;
  margin-left: 5px;
  font-weight: bold;
  cursor: pointer;
}

li.token-input-selected-token-facebook {
  background-color: #5670a6;
  border: 1px solid #3b5998;
  color: #fff;
}

li.token-input-input-token-facebook {
  float: left;
  margin: 0;
  padding: 0;
  list-style-type: none;
}

div.token-input-dropdown-facebook {
  position: absolute;
  width: 400px;
  background-color: #fff;
  overflow: hidden;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  cursor: default;
  font-size: 11px;
  font-family: Verdana;
  z-index: 1;
}

div.token-input-dropdown-facebook p {
  margin: 0;
  padding: 5px;
  font-weight: bold;
  color: #777;
}

div.token-input-dropdown-facebook ul {
  margin: 0;
  padding: 0;
}

div.token-input-dropdown-facebook ul li {
  background-color: #fff;
  padding: 3px;
  margin: 0;
  list-style-type: none;
}

div.token-input-dropdown-facebook ul li.token-input-dropdown-item-facebook {
  background-color: #fff;
}

div.token-input-dropdown-facebook ul li.token-input-dropdown-item2-facebook {
  background-color: #fff;
}

div.token-input-dropdown-facebook ul li em {
  font-weight: bold;
  font-style: normal;
}

div.token-input-dropdown-facebook ul li.token-input-selected-dropdown-item-facebook {
  background-color: #3b5998;
  color: #fff;
}

<html lang="en">
<head>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-tokeninput/1.6.0/jquery.tokeninput.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
</head>
<body>
  <div class="container">
    <div class="card">
      <div class="card-body">
        <input type="text" id="autocomplete" class="form-control" placeholder="Search...">
      </div>
    </div>
  </div>
</body>
</html>

Answer 2

认为 div.token-input-dropdown-facebook 的 z-index 需要比 1 高很多！

Jquery TokenInput - 不能 select 第一个带有光标的元素

Jquery TokenInput - can't select first element with cursor

javascript

css

jquery

bootstrap-4