关于在ajax-autosuggestions的表单输入下面显示UL的建议

Suggestions for displaying a UL below a form input for ajax-autosuggestions

本文关键字：显示 UL 输入 ajax-autosuggestions 表单      更新时间：2023-09-26

我正在寻找一些CSS/HTML输入关于如何在表单文本输入字段下面定位UL LI元素。LI将在ajax调用后用javascript动态地创建/删除。

    <div>
                     <label for="edit-query">Search: </label>
                     <input type="text" maxlength="128" name="query" id="edit-query" size="60" value="" class="form-text" />
 <ul>
     <li>Item 1</li>
     <li>Item 2</li>
</ul>
    </div>

基本上，我希望项目显示在页面内容的其余部分之上，并直接低于表单输入。(可能需要使用z-index属性)

在ajax- autorecommendations表单输入下显示UL的建议

const suggestionEl = document.getElementById("suggestions");
function onChangeInput(e) {
  const inputVal  = e.target.value
  const suggestionValues = getSuggestions(inputVal);
  suggestionEl.innerHTML = suggestionValues;
}
function getSuggestions(value) {
  const suggestionCount =  Math.floor(Math.random() * 10);
  let suggestionValues = "";
  for(let i = 0; i < suggestionCount; i++) {
    suggestionValues += `<li onclick="selectOption(event)">${value}-${i}</li>`
  }
  return suggestionValues;
}
function selectOption(e) {
  const inputVal  = e.target.innerHTML;
  suggestionEl.innerHTML = "";
  document.getElementById("autosuggestion").value = inputVal
}
#container {
  width: 300px;
}
#container input{
  width: 300px;
}
#suggestions {
    list-style: none;
    padding: 0;
    margin: 0;
}
#suggestions li {
      display: block;
    background: #eee;
    padding: 4px;
    border-bottom: 1px solid #ccc;
}
<h3>Autosuggestion with HTML/CSS/JS</h3>
<div id="container">
  <input type="text" onkeyup="onChangeInput(event)" id="autosuggestion" />
  <ul id="suggestions">
    
  </ul>
</div>

相关文章：