PHP/MySQL बेहतर उपयोगकर्ता खोज

मैंने टिप्पणियों में उल्लेख किया है कि जावास्क्रिप्ट टाइपहेड लाइब्रेरी आपके लिए एक अच्छा विकल्प हो सकती है। मैंने ट्विटर की टाइपहेड लाइब्रेरी और ब्लडहाउंड इंजन को काफी मजबूत पाया है। दुर्भाग्य से, दस्तावेज़ीकरण एक मिश्रित बैग है:जब तक आपको जो चाहिए वह उनके उदाहरणों के समान है, आप सुनहरे हैं, लेकिन कुछ विवरण (उदाहरण के लिए, टोकन के स्पष्टीकरण) गायब हैं।

टाइपहेड के कई प्रश्नों में से एक में यहाँ स्टैक ओवरफ़्लो पर, @JensAKoch कहते हैं:

स्पष्ट रूप से, एक संक्षिप्त जाँच में, कांटा पर प्रलेखन थोड़ा बेहतर दिखता है, अगर और कुछ नहीं। आप इसे देखना चाहेंगे।

सर्वर-साइड कोड:

PHP के पुराने संस्करण का उपयोग करने की सभी चेतावनियाँ लागू होती हैं। मैं PHP 5 के साथ पीडीओ का उपयोग करने के लिए पुन:टूलिंग की अत्यधिक अनुशंसा करता हूं, लेकिन यह उदाहरण अनुरोध के अनुसार PHP 4 का उपयोग करता है।

पूरी तरह से परीक्षण न किया गया PHP कोड। json_encode() बेहतर होगा, लेकिन यह PHP 5 तक दिखाई नहीं देता है। आपका समापन बिंदु कुछ इस तरह होगा:

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

क्लाइंट-साइड कोड:

यह उदाहरण स्थिर JSON फ़ाइल का उपयोग करता है सभी परिणामों के लिए एक आधार के रूप में। यदि आप अपने परिणाम सेट को 1,000 से अधिक प्रविष्टियों में जाने का अनुमान लगाते हैं, तो आपको remote ब्लडहाउंड का विकल्प . इसके लिए आपको क्वेरी को संभालने के लिए कुछ कस्टम PHP कोड लिखने की आवश्यकता होगी, लेकिन यह काफी हद तक अंतिम बिंदु के समान दिखाई देगा जो सभी (या कम से कम आपके सबसे सामान्य) डेटा को डंप करता है।

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>

आसानी के लिए, यहां क्लाइंट-साइड कोड का सार है। ।