PHP/MySQL bessere Benutzersuche

Ich habe in den Kommentaren erwähnt, dass eine Javascript-Typeahead-Bibliothek eine gute Wahl für Sie sein könnte. Ich habe festgestellt, dass die Typeahead-Bibliothek und die Bloodhound-Engine von Twitter ziemlich robust sind. Leider ist die Dokumentation gemischt:Solange das, was Sie brauchen, ihren Beispielen sehr ähnlich ist, sind Sie goldrichtig, aber bestimmte Details (z. B. Erklärungen zu den Tokenizern) fehlen.

In einer der mehreren Fragen zu Typeahead hier auf Stack Overflow sagt @JensAKoch:

Ehrlich gesagt sieht die Dokumentation bei der Gabelung bei einem kurzen Check zumindest etwas besser aus. Vielleicht möchten Sie es ausprobieren.

Serverseitiger Code:

Es gelten alle Einschränkungen bei der Verwendung einer alten PHP-Version. Ich empfehle dringend, PDO mit PHP 5 umzurüsten, aber dieses Beispiel verwendet wie gewünscht PHP 4.

Völlig ungetesteter PHP-Code. json_encode() wäre besser, aber es erscheint erst mit PHP 5. Ihr Endpunkt wäre so etwas wie:

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

Clientseitiger Code:

Dieses Beispiel verwendet eine statische JSON-Datei als Stummel für alle Ergebnisse. Wenn Sie erwarten, dass Ihre Ergebnismenge über 1.000 Einträge umfasst, sollten Sie sich den remote Option Bloodhound . Dazu müssten Sie benutzerdefinierten PHP-Code schreiben, um die Abfrage zu verarbeiten, aber es würde weitgehend dem Endpunkt ähneln, der alle (oder zumindest Ihre häufigsten) Daten ausgibt.

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>

Hier ist der Einfachheit halber der Inhalt des clientseitigen Codes .