如何将下拉列表转换为在HTML和PHP中显示搜索匹配结果的输入标签？

Question

我目前有以下代码，用于显示对选项标签的查询结果。 但是我想将其转换为当用户输入某些单词时显示匹配结果的输入，就像google的搜索输入（组合框？）一样。 如何进行输入，以及如何从以下数据（$ notebook）中找到与用户输入匹配的结果的脚本？ 使事情变得复杂的是，我想提交value='.$n['Note']['member_id']而不是用户输入的值（如果可能的话），因为我是初学者，应该有一个更好的解决方案我不知道。 如果可能的话，一些例子会很棒，因为我无法通过谷歌搜索找到一个好的解决方案。 我完全无助，我真的很想听听您的消息！

<form action="" method="get">
<select>
    <?php 
    foreach($notebook as $n):?>
   <?php 
     echo '<option name="my" value='.$n['Note']['member_id'].'>'.$n['Note']['member_name'].'</option>'; 
    ?>
    <?php endforeach;?>
    <?php unset($notebook); ?>
</select>
    <input type="submit" value="search">
</form>

Answer 1

您需要一种自动完成的东西。 检查以下示例：

 $( function() { var availableTags = [ "ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme" ]; $( "#tags" ).autocomplete({ source: availableTags }); } ); 

  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <link rel="stylesheet" href="/resources/demos/style.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <div class="ui-widget"> <label for="tags">Tags: </label> <input id="tags" placeholder="type j"> </div> 

自动完成参考