在表单输入下方显示 UL 以进行 ajax 自动建议的建议

发布于 2024-11-29 06:41:02 字数 514 浏览 3 评论 0原文

我正在寻找一些有关如何将 UL LI 元素放置在表单文本输入字段下方的 CSS/HTML 输入。在 ajax 调用之后,将使用 javascript 动态创建/删除 LI。

    <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 属性)。

I'm looking for some CSS/HTML input on how to position UL LI elements below a form text input field. The LI's would be created/removed dynamically with javascript after an ajax call.

    <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>

Essentially I would like the items to appear above the rest of the page content, and directly below the form input. (probably need to use a z-index property).

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

醉生梦死 2024-12-06 06:41:02

在表单输入下方显示 UL 以进行 ajax 自动建议的建议

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>

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

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>

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文