2014-05-09 6 views
9

क्या सभी सुझावों के अंत में कस्टम लाइन जोड़ने की कोई संभावना है? मैं "अधिक सुझाव दिखाएं" जोड़ना चाहता हूं जो एक लिंक दूसरे पृष्ठ पर जा रहा है।टाइपहेड सुझावों के अंत में एक कस्टम लाइन जोड़ें

$(function(){ 

var countries = new Bloodhound({ 
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'), 
    queryTokenizer: Bloodhound.tokenizers.whitespace, 
    prefetch: { 
    url : '/json/temp/countries.json', 
    filter: function(list) { 
     return $.map(list, function(country) { return { name: country }; }); 
    } 
    }, 
}); 

countries.initialize(); 

$('.component-search-button .ui-input input').typeahead(null, 
{ 
    highlight: true, 
    name: 'countries', 
    displayKey: 'name', 
    source: countries.ttAdapter(), 
    templates: { 
    empty: [ 
     '<div class="empty-message">', 
      '<i>Unfortunatelly we coud not find items that match the current query. Please try again.</i>', 
     '</div>' 
    ].join('\n'), 
    suggestion: Handlebars.compile('<p><strong>{{name}}</strong></p>') 
    } 
} 
); 


}); 

यह गिट पर मूल उदाहरण का पालन कर रहा है। मैंने देखा कि त्रुटि संदेश "टेम्पलेट्स" में "खाली" पर आग लगता है, यह एक विकल्प है कि यह सूची पूरी तरह से या उस तरह कुछ पर आग लग सकता है।

आपकी मदद के लिए बहुत बहुत धन्यवाद।

+0

कृपया एक उत्तर के रूप में अपने जवाब जोड़ सकते हैं और है कि स्वीकार करते हैं। –

+0

हां इससे मदद मिली, धन्यवाद :) मैं 'फ़ूटर' – gdibble

+0

का उपयोग करने जा रहा हूं, मेरा सुझाव है कि आप अपनी पोस्ट को संपादित करें, प्रश्न से अपना उत्तर हटा दें और फिर अपने स्वयं के प्रश्न का उत्तर दें ताकि इसे अनुत्तरित के रूप में चिह्नित नहीं किया जा सके। –

उत्तर

0

ठीक है, मुझे अपना जवाब मिला। Typeahead API से:

डेटासेट निम्न विकल्पों का उपयोग करके कॉन्फ़िगर किया जा सकता है।

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

नाम - डेटासेट का नाम। यह टीटी-डेटासेट में जोड़ा जाएगा- युक्त डीओएम तत्व के वर्ग का नाम बनाने के लिए। केवल अंडरस्कोर, डैश, अक्षर (ए-जेड), और संख्याएं होनी चाहिए। एक यादृच्छिक संख्या के लिए डिफ़ॉल्ट।

displayKey - किसी दिए गए सुझाव वस्तु के लिए, इसकी स्ट्रिंग प्रस्तुति निर्धारित करता है। सुझाव के बाद इनपुट नियंत्रण के मूल्य को सेट करते समय इसका उपयोग किया जाएगा। या तो एक कुंजी स्ट्रिंग या एक फ़ंक्शन हो सकता है जो एक सुझाव वस्तु को एक स्ट्रिंग में बदल देता है। मूल्य के लिए डिफ़ॉल्ट।

टेम्पलेट्स - डेटासेट को प्रस्तुत करते समय टेम्पलेट का एक हैश उपयोग किया जाना चाहिए। ध्यान दें कि एक प्रीकंपिल्ड टेम्पलेट एक ऐसा फ़ंक्शन है जो जावास्क्रिप्ट ऑब्जेक्ट को अपना पहला तर्क मानता है और एक HTML स्ट्रिंग देता है।

खाली - दिए गए प्रश्न के लिए 0 सुझाव उपलब्ध होने पर प्रस्तुत किया गया। या तो एक HTML स्ट्रिंग या एक precompiled टेम्पलेट हो सकता है। यदि यह एक प्रीकंपिल्ड टेम्पलेट है, तो पारित संदर्भ में क्वेरी होगी।

पाद लेख- डेटासेट के नीचे प्रस्तुत किया गया। या तो एक HTML स्ट्रिंग या एक precompiled टेम्पलेट हो सकता है। यदि यह एक प्रीकंपिल्ड टेम्पलेट है, तो पारित संदर्भ में क्वेरी होगी और यह लक्षण होगा।

शीर्षलेख - डेटासेट के शीर्ष पर प्रस्तुत किया गया। या तो एक HTML स्ट्रिंग या एक precompiled टेम्पलेट हो सकता है। यदि यह एक प्रीकंपिल्ड टेम्पलेट है, तो पारित संदर्भ में क्वेरी होगी और यह लक्षण होगा।

सुझाव - एक सुझाव देने के लिए प्रयुक्त। यदि सेट है, तो यह एक precompiled टेम्पलेट होना चाहिए। संबंधित सुझाव वस्तु संदर्भ के रूप में कार्य करेगा। प्रदर्शन के मूल्य के लिए डिफ़ॉल्ट एक पी टैग में लपेटा गया है यानी

{{value}}

तो क्या एक करना होगा है:

templates: { 
empty: [ 
    '<div class="empty-message">', 
     '<i>Unfortunatelly we coud not find items that match the current query. Please try again.</i>', 
    '</div>' 
    ].join('\n'), 
    footer : [ 
    '<div class="more-results">', 
     '<a href="#">More Results</a>', 
    '<div>' 
    ].join('\n'), 
    suggestion: Handlebars.compile('<p>{{name}}</p>') 
} 

आशा इस मदद करता है कि किसी को :)

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