Tìm kiếm người dùng tốt hơn PHP / MySQL

Tôi đã đề cập trong các nhận xét rằng thư viện tiêu đề chữ Javascript có thể là một lựa chọn tốt cho bạn. Tôi thấy thư viện Typeahead của Twitter và công cụ Bloodhound khá mạnh mẽ. Thật không may, tài liệu là một túi hỗn hợp:miễn là những gì bạn cần rất giống với các ví dụ của họ, bạn là vàng, nhưng một số chi tiết nhất định (ví dụ:giải thích về máy nướng bánh mì) bị thiếu.

Trong một trong các một số câu hỏi lại là Typeahead đây trên Stack Overflow, @JensAKoch nói:

Thành thật mà nói, trong một cuộc kiểm tra ngắn gọn, tài liệu tại ngã ba có vẻ tốt hơn một chút, nếu không có gì khác. Bạn có thể muốn kiểm tra nó.

Mã phía máy chủ:

Tất cả những lưu ý khi sử dụng phiên bản PHP cũ đều được áp dụng. Tôi thực sự khuyên bạn nên trang bị lại để sử dụng PDO với PHP 5, nhưng ví dụ này sử dụng PHP 4 theo yêu cầu.

Mã PHP hoàn toàn chưa được kiểm tra. json_encode() sẽ tốt hơn, nhưng nó không xuất hiện cho đến PHP 5. Điểm cuối của bạn sẽ giống như:

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

Mã phía máy khách:

Ví dụ này sử dụng tệp JSON tĩnh như một sơ khai cho tất cả các kết quả. Nếu bạn dự đoán tập hợp kết quả của mình sẽ có hơn 1.000 mục nhập, bạn nên xem xét remote tùy chọn của Bloodhound . Điều này sẽ yêu cầu bạn viết một số mã PHP tùy chỉnh để xử lý truy vấn, nhưng nó sẽ trông gần giống với điểm cuối kết xuất tất cả (hoặc ít nhất là dữ liệu phổ biến nhất của bạn).

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>

Để dễ hiểu, đây là Giới thiệu về mã phía máy khách .