2014-04-07 7 views
5

मैं अपने स्वतः सुझाव के लिए Typeahead.js उपयोग कर रहा हूँ उत्पन्न, मेरे कोड है:Typeahead.js - प्रीफ़ेच गतिशील php JSON

var job_scopes = new Bloodhound({ 
    datumTokenizer: function(d) { 
     return Bloodhound.tokenizers.whitespace(d.value); 
    },queryTokenizer: Bloodhound.tokenizers.whitespace, 
    limit: 100, 
    remote: { 
     url: 'http://www.domain.com/json.php?action=job_title&q=%QUERY' 
    } 
}); 

job_scopes.initialize(); 

यह ठीक काम करता है, फिर भी मैं prefetch लिए इसे बदलने के लिए, होना चाहते हैं मेरे JSON में tokens का उपयोग करने में सक्षम और ब्लडहाउंड पर टोकन के आधार पर लौटने वाले परिणाम छोड़ दें।

मैं बस स्थिर JSON नहीं बना सकता, क्योंकि मेरे पास हर समय डीबी में सुझाव आइटम जोड़े गए हैं।

क्या जेसन गतिशील रूप से प्रीफेच करने का कोई तरीका है?

+0

क्या मेरा उत्तर मदद मिली। क्या आपने अपनी समस्या ठीक की? –

उत्तर

1

मैंने prefetch का उपयोग करके टाइपहेड का एक उदाहरण लिखा है। यह उदाहरण एक दूरदराज के स्रोत से JSON डेटा को पुन: प्राप्त:

http://jsfiddle.net/Fresh/1hrk0qso/

एक दूरस्थ स्रोत से JSON prefetch करने के लिए, इस प्रकार खोजी कुत्ता वस्तु लागू किया गया था:

var countries = new Bloodhound({ 
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'), 
queryTokenizer: Bloodhound.tokenizers.whitespace, 
prefetch: { 
url: 'https://cdn.rawgit.com/twitter/typeahead.js/gh-pages/data/countries.json', 
    filter: function (countries) { 
     return $.map(countries, function (country) { 
      return { 
       name: country 
      }; 
     }); 
    } 
} 
}); 

तुम एक करने के लिए यूआरएल का स्थान ले लेगा स्थिर जेएसओएन फ़ाइल (उपर्युक्त कोड में दिखाया गया) एक यूआरएल के साथ जो आपके गतिशील जेनरेट जेएसओएन देता है।

यहां कुंजी कोड "फ़िल्टर" फ़ंक्शन है जो फ्लैट JSON टोकन को जावास्क्रिप्ट ऑब्जेक्ट्स की एक सरणी में मैप करता है जो टाइपहेड को संचालित करने की आवश्यकता होती है।

1

दस्तावेज़ों से: "हालांकि छोटे डेटा सेट के लिए इसे दूर करना संभव है, प्रीफ़ेच किए गए डेटा का मतलब संपूर्ण डेटा सेटों के लिए नहीं है। बल्कि, इसे सुझावों के लिए प्रथम स्तर के कैश के रूप में कार्य करना चाहिए। इस चेतावनी को ध्यान में रखें, आप स्थानीय भंडारण सीमाओं को मारने का जोखिम चलाते हैं। "

https://github.com/twitter/typeahead.js/blob/master/doc/bloodhound.md#prefetch

मैं नहीं जानता कि आप कितना डेटा पुन: प्राप्त कर रहे हैं, लेकिन यह डेटा प्राप्त करें और फिर से लोड है कि आपके खोजी कुत्ता उदाहरण में जब आप प्रतिक्रिया प्राप्त करने के लिए एक ajax कॉल करने के लिए बेहतर हो सकता है।

//Let's assume that the data you get back from the server is an array of objects 
//data = [{value: 'a'}, {value: 'b'}, {value: 'c'}]; 

$.get("http://example.com/your-data", function(data) { 
    var bh = new Bloodhound({ 
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'), 
    queryTokenizer: Bloodhound.tokenizers.whitespace, 
    local: data 
    }); 

    var dataset = { 
    name: "My-dataset-name", 
    displayKey: "value", 
    source: bh.ttAdapter() 
    }; 

    var ta = $(".typeahead").eq(0).typeahead(
    { 
     hint: true 
     highlight: true 
     minLength: 1 
    }, 
    datasetStates 
    ); 
    ta.on('typeahead:selected', someFunctionToHandleEvent); 
}); 

आशा इस मदद करता है:

यहाँ एक उदाहरण एक jQuery ajax कॉल का उपयोग कर रहा है।

संबंधित मुद्दे