是否可以合并使用具有不同来源的typeahead.js的多个输入？

Question

我有一个包含大量文本输入的表单,其中10个我想使用带有Bloodhound的typeahead.js.我有两个工作 - 它们都包括预取和远程数据源.但是对于typeahead/Bloodhound的每个实例都有相当数量的jQuery代码,我很好奇是否有人试图"泛化"typeahead/Bloodhound来处理多个不同的输入元素,每个元素都有不同的数据源？它可能比它的价值更麻烦,但我有点担心页面必须加载的代码量.

我的环境是Spring/MVC,Hibernate(Oracle db),Bootstrap.

这是一个typeahead/Bloodhound实例的示例.它在函数中,因为我正在动态添加行的输入,所以我必须在添加新行后调用此函数以在该行的文本输入上启用typeahead.

function initIngredientsTA() {
    //set the options
    var ingredBH = new Bloodhound({
        limit: 20,
        datumTokenizer: function(datum) {
            return Bloodhound.tokenizers.whitespace(datum.name);
        },
        queryTokenizer: Bloodhound.tokenizers.whitespace,       
        prefetch: {
            url: '/myapp/resources/ingredients.json',
            cache: false,
            filter: function(data) {
                console.log("data: " + data.ingredients);
                return $.map(data.ingredients, function (ingredient) {
                    return {
                        id : ingredient.id,
                        name : ingredient.name
                    };
                });
            } 
        },
        remote: {
            url: '/myapp/recipe/addRecipe/getIngredients?searchStr=%QUERY',
            cache: false,
            wildcard: '%QUERY',
            filter: function(data) {
                console.log("data: " + data);
                return $.map(data, function (data) {
                    return {
                        id : data.id,
                        name : data.name
                    };
                });
            } 
        }
    });

    //initialize the suggestion Engine
    ingredBH.initialize();

    $('.ingredDesc').typeahead(
    {
        hint: true,
        highlight: true,
        minLength: 1
    },
    {
        name: 'ingredients',
        displayKey: 'name',
        limit: 20,
        source: ingredBH.ttAdapter(),
    })
};

编辑:我认为我真正要问的是,是否有人创建了typeahead/Bootstrap的"模板"版本,然后可以为每个单独的文本输入实例化.

Answer 1

抱歉，如果这是一个有明显答案的问题，但我是 Java、Spring/Hibernate、jQuery 等堆栈的新手。使用 Firebug，我能够弄清楚 typeahead 和 Bloodhound 都需要什么，并得出以下结论：

//token and filter functions
function ingredDatumToken(datum) {
    return Bloodhound.tokenizers.whitespace(datum.name);
}

function ingredPrefetchFilter(data) {
    return $.map(data.ingredients, function (ingredient) {
        return {
            id : ingredient.id,
            name : ingredient.name
        };
    });
};

function ingredRemoteFilter(data) {
    return $.map(data, function (data) {
        return {
            id : data.id,
            name : data.name
        };
    });
};

//Bloodhound initialization
function initBloodhound(limit, cache, datumToken, queryToken,prefetchUrl,prefetchFilter, remoteUrl, wildcard, remoteFilter)
{
    var token = Bloodhound.tokenizers.whitespace; 

    var options = {};
    var prefetchOptions = {};
    var remoteOptions = {};

    prefetchOptions['url'] = prefetchUrl;
    prefetchOptions['cache'] = cache;
    prefetchOptions['filter'] = prefetchFilter;

    remoteOptions['url'] = remoteUrl;
    remoteOptions['cache'] = cache;
    remoteOptions['wildcard'] = wildcard; 
    remoteOptions['filter'] = remoteFilter;       

    options['limit'] = limit; 
    options['datumTokenizer'] = datumToken === null ? token : datumToken;
    options['queryTokenizer'] = queryToken === null ? token : queryToken;

    if (prefetchUrl != null)
        options['prefetch'] = prefetchOptions;

    if (remoteUrl != null)
        options['remote'] = remoteOptions;

    return new Bloodhound(options);
};

//create two Bloodhound engines
var ingredBH = initBloodhound(50,false,ingredDatumToken,null,'/myapp/resources/ingredients.json',ingredPrefetchFilter,'/myapp/recipeaddRecipe/getIngredients?searchStr=%QUERY','%QUERY',ingredRemoteFilter);
var measureBH = initBloodhound(20,false,null,null,'/myapp/resources/measures.json',null,null,null,null);
//add more Bloodhound engines here

//typeahead options
function initTypeaheadOptions(hint, highlight, minLength) {

    var options = {};

    options['hint'] = hint;
    options['highlight'] = highlight;
    options['minLength'] = minLength;

    return options;
}

//typeahead dataset
function initTypeaheadDataset(name, displayKey, limit, source) {

    var datasets = {};

    datasets['name'] = name;
    datasets['displayKey'] = displayKey;
    datasets['limit'] = limit;
    datasets['source'] = source;

    return datasets;
}

//initialize a typeahead control    
function initIngredientsTA() {

    var options = initTypeaheadOptions(true,true,1);
    var dataset = initTypeaheadDataset('ingredients', 'name', 20, ingredBH);

    $('.ingredDesc').typeahead(options,dataset);
};

//initialize a typeahead control
function initMeasuresTA() {

    var options = initTypeaheadOptions(true,true,1);
    var dataset = initTypeaheadDataset('measures', null, 20, measureBH);

    $('.ingredQtyType').typeahead(options,datasets);
};

//add more typeahead initialization functions here

//call the initialize functions
initIngredientsTA();
initMeasuresTA();
//call more initialize functions here

我仍在努力使其更加通用，并且我并不热衷于调用 Bloodhound 初始化函数中的所有参数，但由于我将在页面上拥有大约 10 个或更多启用预输入的控件，因此这将是相当不错的只需几行代码即可轻松添加其余部分。那些不属于页面上动态创建的行的预输入控件不需要单独的初始化函数，但只需 3 行代码即可初始化。我绝对愿意接受任何改进意见或建议，包括任何认为这是一个愚蠢想法的想法。