僅CSS自動建議？

Question

我正在嘗試弄清楚如何使純CSS自動建議，我需要幫助。 我想自動顯示/隱藏建議，以防它們匹配/不匹配文本輸入值（或類似值）。 我發現這個JSFiddle是一個很好的例子： https ://jsfiddle.net/zsUuK/6/

<div class="input-wrapper">
  <input type="text" class="autosuggest">
  <input type="submit" value="Search">
  <div class="dropdown">
      <ul class="result">
        <li>Suggestion</li>
        <li>Not to be here</li>
      </ul>
  </div>
</div>

默認情況下，第一個建議將被隱藏，並在鍵入“ S”時顯示出來，例如

請注意 ，我知道如何使用JavaScript和HTML autocomplete =“ on”進行自動建議。 我的問題是，是否有任何方法只能使用CSS進行操作，即使是非常棘手的方法也是如此。

期待您的回答，已經非常感謝。

Answer 1

您需要為此使用某種jquery，這是一個顯示/隱藏建議的函數：

function mus_pl_filter(element) {
var value = $(element).val();
$(".result > li").each(function() {
    if ($(this).text().search(value) > -1) {
        $(this).show();
    }
    else {
        $(this).hide();
    }
});

}

在鍵盤上觸發此功能：

<input type="text" class="autosuggest" onkeyup="mus_pl_filter(this)">