PHP/MySQL beter zoeken door gebruikers

Ik heb in de opmerkingen vermeld dat een Javascript-typeahead-bibliotheek een goede keuze voor u zou kunnen zijn. Ik heb gemerkt dat Twitter's Typeahead-bibliotheek en Bloodhound-engine behoorlijk robuust zijn. Helaas is de documentatie een allegaartje:zolang wat je nodig hebt erg lijkt op hun voorbeelden, ben je gouden, maar bepaalde details (uitleg van de tokenizers, bijvoorbeeld) ontbreken.

In een van de verschillende vragen over Typeahead hier op Stack Overflow zegt @JensAKoch:

Eerlijk gezegd ziet de documentatie bij de vork er bij een korte controle een beetje beter uit, als niets anders. Misschien wil je het eens bekijken.

Server-side code:

Alle kanttekeningen bij het gebruik van een oude versie van PHP zijn van toepassing. Ik raad ten zeerste aan om PDO opnieuw in te stellen om PDO te gebruiken met PHP 5, maar in dit voorbeeld wordt PHP 4 gebruikt zoals gevraagd.

Volledig ongeteste PHP-code. json_encode() zou beter zijn, maar het verschijnt pas in PHP 5. Je eindpunt zou zoiets zijn als:

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

Client-side code:

Dit voorbeeld gebruikt een statisch JSON-bestand als een stomp voor alle resultaten. Als u verwacht dat uw resultatenset meer dan 1.000 inzendingen zal bevatten, moet u de remote optie van Bloedhond . Hiervoor moet je wat aangepaste PHP-code schrijven om de query af te handelen, maar het zou er grotendeels hetzelfde uitzien als het eindpunt dat alle (of in ieder geval je meest voorkomende) gegevens dumpt.

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>

Voor het gemak is hier de Samenvatting van de client-side code .