ドロップダウンリストを、HTMLとPHPの検索結果が一致する入力タグに変換するにはどうすればよいですか？

Question

私は現在、オプションのタグに対するクエリの結果を示す次のコードを持っています。しかし、私は、ユーザーがGoogleの検索入力（コンボボックス）のようにいくつかの単語を入力すると、一致する結果を示す入力に変換したいと思います。入力と、次のデータ（$ノートブック）の一致する結果をユーザーの入力で見つけるスクリプトを作成するにはどうすればよいですか？物事が複雑になるのは、できるだけ私が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>

Autocomplete Reference