PHP/MySQL meilleure recherche d'utilisateurs

J'ai mentionné dans les commentaires qu'une bibliothèque de saisie Javascript pourrait être un bon choix pour vous. J'ai trouvé la bibliothèque Typeahead de Twitter et le moteur Bloodhound assez robustes. Malheureusement, la documentation est un sac mélangé :tant que ce dont vous avez besoin est très similaire à leurs exemples, vous êtes en or, mais certains détails (explications des tokenizers, par exemple) manquent.

Dans l'une des plusieurs questions concernant Typeahead ici sur Stack Overflow, @JensAKoch dit :

Franchement, après une brève vérification, la documentation à la fourche semble un peu meilleure, si rien d'autre. Vous voudrez peut-être le vérifier.

Code côté serveur :

Toutes les mises en garde liées à l'utilisation d'une ancienne version de PHP s'appliquent. Je recommande fortement de réoutiller pour utiliser PDO avec PHP 5, mais cet exemple utilise PHP 4 comme demandé.

Code PHP totalement non testé. json_encode() serait mieux, mais il n'apparaît pas avant PHP 5. Votre point de terminaison serait quelque chose comme :

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 "]";

Code côté client :

Cet exemple utilise un fichier JSON statique comme souche pour tous les résultats. Si vous prévoyez que votre ensemble de résultats dépasse 1 000 entrées, vous devriez consulter le remote option de Bloodhound . Cela nécessiterait que vous écriviez du code PHP personnalisé pour gérer la requête, mais cela ressemblerait en grande partie au point final qui vide toutes les données (ou du moins vos données les plus courantes).

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>

Pour plus de facilité, voici l'L'essentiel du code côté client .