PHP/MySQLのより良いユーザー検索

コメントの中で、Javascript先行先行ライブラリがあなたにとって良い選択かもしれないと述べました。 TwitterのTypeaheadライブラリとBloodhoundエンジンはかなり堅牢であることがわかりました。残念ながら、ドキュメントはまちまちです。必要なものが例と非常に似ている限り、あなたは金色ですが、特定の詳細（たとえば、トークナイザーの説明）が欠落しています。

先行入力に関するいくつかの質問の1つここStackOverflowで、@JensAKochは次のように述べています。

率直に言って、簡単なチェックで、フォークのドキュメントは、他に何もないとしても、少し良く見えます。ぜひチェックしてみてください。

サーバー側コード：

古いバージョンのPHPを使用する際のすべての注意事項が適用されます。 PHP 5でPDOを使用するようにツールを変更することを強くお勧めしますが、この例では、要求に応じてPHP4を使用します。

完全にテストされていないPHPコード。 json_encode() より良いでしょうが、PHP5まで表示されません。エンドポイントは次のようになります。

headers("Content-Type: application/json");
$results = mysql_query(
   "SELECT ID,StageName,AKA1,AKA2,LegalName,SoundEx FROM performers"
);

$fields = array("ID","StageName","AKA1","AKA2","LegalName","SoundEx");

echo "[";

$first =  true;
while ($row = mysql_fetch_array($results)) {
    ($first) ? $first = false : echo ',';

    echo "\n\t,{";
    foreach($fields as $f) {
        echo "\n\t\t\"{$f}\": \"".$row[$f]."\"";
    }
    echo "\n\t}";
}
echo "]";

クライアント側コード：

この例では、静的JSONファイルを使用しています。すべての結果のスタブとして。結果セットが1,000エントリを超えると予想される場合は、remote ブラッドハウンドのオプション。これには、クエリを処理するためのカスタムPHPコードを作成する必要がありますが、すべての（または少なくとも最も一般的な）データをダンプするエンドポイントとほぼ同じように見えます。

var actors = new Bloodhound({
  // Each row is an object, not a single string, so we have to modify the
  // default datum tokenizer. Pass in the list of object fields to be
  // searchable.
  datumTokenizer: Bloodhound.tokenizers.obj.nonword(
    'StageName','AKA1','AKA2','LegalName','SoundEx'
  ),
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  // URL points to a json file that contains an array of actor JSON objects
  // Visit the link to see details 
  prefetch: 'https://gist.githubusercontent.com/tag/81e4450de8eca805f436b72e6d7d1274/raw/792b3376f63f89d86e10e78d387109f0ad7903fd/dummy_actors.json'
});

// passing in `null` for the `options` arguments will result in the default
// options being used
$('#prefetch .typeahead').typeahead(
    {
        highlight: true
    },
   {
        name: 'actors',
        source: actors,
        templates: {
        empty: "<div class=\"empty-message\">No matches found.</div>",
        
        // This is simply a function that accepts an object.
        // You may wish to consider Handlebars instead.
        suggestion: function(obj) {
            return '<div class="actorItem">'
                + '<span class="itemStageName">'+obj.StageName+"</span>"
                + ', <em>legally</em> <span class="itemLegalName">'+obj.LegalName+"</span>"
        }
        //suggestion: Handlebars.compile('<div><strong>{{value}}</strong> – {{year}}</div>')
      },
      display: "LegalName" // name of object key to display when selected
      // Instead of display, you can use the 'displayKey' option too:
      // displayKey: function(actor) {
      //     return actor.LegalName;
      // }
});

/* These class names can me specified in the Typeahead options hash. I use the defaults here. */
    .tt-suggestion {
        border: 1px dotted gray;
        padding: 4px;
        min-width: 100px;
    }
    .tt-cursor {
        background-color: rgb(255,253,189);
    }
    
    /* These classes are used in the suggestion template */
    .itemStageName {
        font-size: 110%;
    }
    .itemLegalName {
        font-size: 110%;
        color: rgb(51,42,206);
    }

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"></script>


<p>Type something here. A good search term might be 'C'.</p>
<div id="prefetch">
  <input class="typeahead" type="text" placeholder="Name">
</div>

簡単にするために、ここにクライアント側コードの要点があります。。