如何將下拉列表轉換爲在HTML和PHP中顯示搜索匹配結果的輸入標記？

Question

我目前有以下代碼顯示查詢結果到選項標籤。但是我想將它轉換爲輸入時顯示匹配結果的輸入，當用戶輸入一些單詞時，就像谷歌的搜索輸入（組合框？）一樣。我怎樣才能做出一個輸入，以及一個腳本，可以從用戶的輸入中查找以下數據（$ notebook）中的匹配結果？而讓事情變得複雜的是我想提交value='.$n['Note']['member_id']，而不是用戶輸入的值，如果可能的話，因爲我是初學者，應該有更好的解決方案，我不知道。如果可能的話，一些例子會很好，因爲我無法通過Google搜索找到一個好的解決方案。我完全無助，我真的很想聽到你的消息！

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

Autocomplete Reference