डेटा-यूआरएल पैरामीटर के माध्यम से typeahead.js पर यूआरएल पास करना

मेरे पास ट्विटर टाइपहेड.जेएस अच्छी तरह से काम कर रहा है लेकिन मैं डेटा पैरामीटर के माध्यम से 'प्रीफेच' या 'रिमोट' यूआरएल पास करके इसे थोड़ा और मॉड्यूलर (डीआरवाई!) बनाना चाहता था।

तो मेरा मार्कअप है:

<input class="typeahead" data-url="http://campaigndashboard.dev/ajax/con" />

मैंने jQuery में लिखा था:

$('.typeahead').typeahead({
    name: $(this).data('name'),
    limit: 100,

    remote: { /* This works! */
         url: 'http://campaigndashboard.dev/ajax/con?q=%QUERY',
    },
    remote: {  /* This doesn't */
         url: $(this).data('url') + '?q=%QUERY',
    }
});

मैंने पहले चर को पारित करने के इस तरीके का उपयोग किया है, लेकिन मैं इस बात से फंस गया हूं कि यह क्यों काम नहीं करता है। मैं% QUERY को भी जोड़ना चाहूंगा यदि यह 'रिमोट' है, लेकिन अगर इसका 'प्रीफेच' नहीं है- उस पर कोई विचार?

नोट: मैं यूआरएल के% QUERY भाग में संशोधन करने की कोशिश नहीं कर रहा हूं, इसलिए मैंने प्रतिस्थापन() फ़ंक्शन को छूट दी है।

Jquery के लिए बहुत नया है तो कृपया मुझे यह सब कुछ बताने में संकोच न करें मैं गलत कर रहा हूँ!

अग्रिम में धन्यवाद

अल

0
बस स्पष्ट करने के लिए, मैंने यहां 'रिमोट' लाइनों को शामिल किया है, लेकिन वास्तविक कोड में, मैंने एक या दूसरे का उपयोग किया था
जोड़ा लेखक al_manchester, स्रोत
हाय @ पास्कमेल। शीघ्र जवाब देने के लिए ध्न्यवाद। कोई त्रुटि नहीं, और मैंने एक console.log() को शामिल करने का प्रयास किया लेकिन यह लॉग नहीं किया: .on ('typeahead: open', function() {console.log ('remote =', दूरस्थ);} )
जोड़ा लेखक al_manchester, स्रोत
क्या आपको जावास्क्रिप्ट कंसोल में कोई त्रुटि मिली?
जोड़ा लेखक Pascamel, स्रोत

3 उत्तर

फिर भी बेहतर:

<div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code">

$(".typeahead").each(function(){
      $(this).typeahead({
          name: $(this).name,
          remote: $(this).data('source')         
      });
 });
</div> </div>

2
जोड़ा
धन्यवाद स्टीव! बहुत neater।
जोड़ा लेखक al_manchester, स्रोत

इसे हल किया !!

टाइपहेड का आह्वान करने से पहले मुझे डेटा-एट्रिब्यूट्स इकट्ठा करने के लिए किसी प्रकार का फ़ंक्शन बनाना होगा।

मैंने यही किया (अगर कोई और सोच रहा है):

$('.typeahead').each( function() {
    createTypeahead( this );
} );

function createTypeahead( selector ){
  var t = $( selector );
  //get all the data-atributes from the input tag
  var source = $(t).data('source');
  //etc etc (get as many vars as you like here)

  var retval = t.typeahead({
    prefetch: source,    //This is the var from above
    //etc etc
  });

  return retval;
}

मुझे यकीन है कि यह सबसे सुंदर तरीका नहीं है - इसे सही करने के लिए स्वतंत्र महसूस करें/टिप्पणियों में इसे सुधारें

आपका मार्कअप (एचटीएमएल) इस तरह दिखेगा:

<input type="text" class="typeahead" data-source="http://{yoursite.com}/url/to/your/json" >

उम्मीद है कि यह किसी की मदद की।

1
जोड़ा
पुनश्च। यदि आप इस तरह के रूप में नए थे, तो यह काम करने के लिए, बस उन टाइपों में वर्ग = 'टाइपहेड' जोड़ें जिन्हें आप टाइपहेड पर दिखाना चाहते हैं। डेटा-स्रोत = "यूआरएल" निर्दिष्ट करना न भूलें, क्योंकि इस उदाहरण में कोई फॉलबैक नहीं है। <इनपुट प्रकार = "पाठ" वर्ग = "टाइपहेड" डेटा-स्रोत = "http://{yoursite.com}/url/to/your/json">
जोड़ा लेखक al_manchester, स्रोत
मुझे यह समस्या भी है। मुझे विश्वास नहीं है कि यह सीधे समर्थित नहीं है। मुझे आपका दृष्टिकोण पसंद है, लेकिन #Each लूप चलाने के बाद टाइपहेड इनपुट जोड़ा जाने पर यह काम नहीं करेगा।
जोड़ा लेखक Peter P., स्रोत

ठीक है "उचित" (?) जवाब पता लगाया। क्लिक समय पर यूआरएल को गतिशील रूप से निर्धारित करने के लिए, आपको स्रोत सिंटैक्स का उपयोग करने की आवश्यकता है, जहां पहला तर्क विकल्प का नक्शा है, और दूसरा से nth तर्क डेटासेट विकल्पों के मानचित्र हैं।

$(".typeahead").typeahead({}, {
  source: function(){
    var url = this.$el.parents(".twitter-typeahead").find(".typeahead").data().url
    ....ajax to your url...
  }
})
0
जोड़ा