PHP/MySQL pencarian pengguna yang lebih baik

Saya sebutkan di komentar bahwa perpustakaan typeahead Javascript mungkin merupakan pilihan yang baik untuk Anda. Saya telah menemukan perpustakaan Typeahead Twitter dan mesin Bloodhound cukup kuat. Sayangnya, dokumentasinya adalah campuran:selama apa yang Anda butuhkan sangat mirip dengan contoh mereka, Anda adalah emas, tetapi detail tertentu (penjelasan tentang tokenizer, misalnya) tidak ada.

Di salah satu beberapa pertanyaan tentang Typeahead di sini di Stack Overflow, @JensAKoch mengatakan:

Terus terang, dalam pemeriksaan singkat, dokumentasi di fork terlihat sedikit lebih baik, jika tidak ada yang lain. Anda mungkin ingin memeriksanya.

Kode sisi server:

Semua peringatan menggunakan versi lama PHP berlaku. Saya sangat merekomendasikan retooling untuk menggunakan PDO dengan PHP 5, tetapi contoh ini menggunakan PHP 4 seperti yang diminta.

Kode PHP yang benar-benar belum teruji. json_encode() akan lebih baik, tetapi tidak muncul sampai PHP 5. Titik akhir Anda akan menjadi seperti:

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

Kode sisi klien:

Contoh ini menggunakan file JSON statis sebagai rintisan untuk semua hasil. Jika Anda mengantisipasi set hasil Anda melebihi 1.000 entri, Anda harus melihat ke remote pilihan Bloodhound . Ini akan mengharuskan Anda untuk menulis beberapa kode PHP khusus untuk menangani kueri, tetapi sebagian besar akan terlihat mirip dengan titik akhir yang membuang semua (atau setidaknya data Anda yang paling umum).

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>

Untuk memudahkan, berikut adalah Inti kode sisi klien .