通過data-url參數傳遞URL到typeahead.js

我有Twitter Typeahead.js工作正常，但我想通過傳遞'prefetch'或'remote'URL來使它更加模塊化（DRY！）數據參數。通過data-url參數傳遞URL到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，如果它的'遠程'，但不是'預取' - 對此的任何想法？

注意：我不是想修改URL的％QUERY部分，所以我打折了replace（）函數。

Jquery非常新，所以請隨時告訴我，我做錯了所有這些事情！

在此先感謝

鋁

來源

2013-11-27 al_manchester

只是爲了澄清，我在這裏既包括「遠程」行，但在實際的代碼，我用一個或另一個 –

你在JavaScript控制檯得到一個錯誤？ – Pascamel

Hi @Pascamel。感謝您及時的回覆。沒有錯誤，我試圖包括一個console.log（）但沒有; t日誌： '.on（'typeahead：opened'，function（）{ console.log（'remote ='，remote）;} ）' –

解決它！

我需要創建某種函數來在調用typeahead之前收集數據屬性。

這是我做了什麼（如果其他人想知道）：

$('.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; 
}

我敢肯定，這是不是最優雅的方式 - 隨時糾正這種/改進的意見

您的標記（HTML）是這樣的：

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

希望這會幫助別人。

來源

2013-11-27 22:05:07

PS。如果你和我一樣新，那麼爲了實現這個目標，只需將class ='typeahead'添加到想要出現typahead的輸入。別忘了指定一個data-source =「url」，因爲在這個例子中沒有回退。 ' –

我也有這個問題。我不相信這不是直接支持。我喜歡你的方法，但如果運行#each循環後加了預輸入的輸入將無法正常工作。 –

更妙的是：

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

來源

2015-01-16 12:18:59 Steven

謝謝史蒂夫！很整潔。 –

好想通了「正確」的答案（？）。爲了在點擊時動態確定URL，您需要使用源語法，其中第一個參數是選項的映射，第二個到第n個參數是DataSet選項的映射。

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

來源

2016-02-02 00:01:17

通過data-url參數傳遞URL到typeahead.js

回答

相關問題