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

发布于 2024-11-29 06:41:02 字数 514 浏览 1 评论 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).

分享到QQ

分享到微博

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

发布评论

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

醉生梦死 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>

回复收藏 0 原文

~没有更多了~