可以合并多个输入，每个输入都使用不同来源的typeahead.js？

Question

我有一个包含大量文本输入的表单，其中10条是我想用的typeahead.js和血犬。我让它为其中两个工作-它们都包括预取和远程数据源。但是有相当数量的jQuery代码用于typeahead/Bloodhound的每个实例，我很好奇是否有人试图“泛化”类型/血犬来处理多个不同的输入元素，每个输入元素都有不同的数据源？这可能会带来比它更大的麻烦，但我有点担心页面需要加载多少代码。

我的环境是Spring/MVC、Hibernate (Oracle db)、Bootstrap。

下面是一个类型提前/血犬实例的示例。它在一个函数中，因为我动态地添加行的输入，所以我必须在添加新行之后调用这个函数，以便对该行中的文本输入启用类型提前。

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，我能够找出the和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行代码即可初始化。我绝对愿意接受任何改进的意见或建议，包括任何认为这是一个愚蠢的想法。

Answer 2

我刚刚注意到这个问题很有价值，所以我想分享一下我对我最初的答案所做的一些优化。

基函数位于包含文件中：

typeahead.js

function setBHPrefetchOpts(cache, prefetchUrl, prefetchFilter) {

    var prefetchOptions = {};

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

    return prefetchOptions;
}

function setBHRemoteOpts(cache, wildcard, remoteUrl, remoteFilter) {

    var remoteOptions = {};

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

    return remoteOptions;
}

function setBHOptions(sufficient, datumToken, queryToken, prefetchOptions, remoteOptions) {

    var token = Bloodhound.tokenizers.whitespace; 

    var options = {};

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

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

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

    return options;
}   

function initTypeaheadOptions(hint, highlight, minLength) {

    var options = {};

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

    return options;
};

function initTypeaheadDataset(name, displayKey, limit, source) {

    var dataset = {};

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

    return dataset;
};

要初始化预取(json)类型：

var prefetchOpts = setBHPrefetchOpts(false, '/recipe/resources/measures.json', null);
var bhOpts = setBHOptions(50, null, null, prefetchOpts, null);
var measureBH = new Bloodhound(bhOpts);

function initMeasuresTA() {

    var options = initTypeaheadOptions(true,true,1);
    var dataset = initTypeaheadDataset('measures', null, 50, measureBH);
    $('.ingredQtyType').typeahead(options,dataset);
};

若要初始化远程打字机，请执行以下操作：

var remoteOpts = setBHRemoteOpts(false, '%QUERY', '/recipe/recipe/getQualifiers?searchStr=%QUERY', null);
var bhOpts = setBHOptions(50, null, null, null, remoteOpts);
var qualifierBH = new Bloodhound(bhOpts);   

function initQualifiersTA() {

    var options = initTypeaheadOptions(true,true,1);
    var dataset = initTypeaheadDataset('qualifiers', null, 50, qualifierBH);
    $('.ingredQual').typeahead(options,dataset);
};

在上述两项中，json由单个项组成，例如，

“杯”、“杯”、“盎司”、“盎司”、“磅”、“磅”、“茶匙”、“茶匙”、“汤匙”、“汤匙”

要用更复杂的json初始化预取和远程，如下所示：

{“成分”：{“id”：“142”，“名称”：“面粉”}，{"id":"144"，“name”：“Sugar”}

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
        };
    });
};

var prefetchOpts = setBHPrefetchOpts(false, '/recipe/resources/ingredients.json', ingredPrefetchFilter);
var remoteOpts = setBHRemoteOpts(false, '%QUERY', '/recipe/recipe/getIngredients?searchStr=%QUERY', ingredRemoteFilter);
var bhOpts = setBHOptions(50, ingredDatumToken, null, prefetchOpts, remoteOpts);
var ingredBH = new Bloodhound(bhOpts);

function initIngredientsTA() {

    var options = initTypeaheadOptions(true,true,1);
    var dataset = initTypeaheadDataset('ingredients', 'name', 50, ingredBH);
    $('.ingredDesc').typeahead(options,dataset);
};

动态查询的示例：

function setSourceUrl(url, query) {
    var source = $('#inputSource').val();
    var newurl = url + '?searchStr=' + query + '&type=' + source;
    return newurl;
};

var remoteOpts = setBHRemoteOpts(false, '%QUERY', '/recipe/recipe/getSources', null);
var remoteOpts['replace'] = function(url, query) {return setSourceUrl(url, query);}; 
var bhOpts = setBHOptions(50, null, null, null, remoteOpts);
var sourceBH = new Bloodhound(bhOpts);

function initSourceTA() {

    var options = initTypeaheadOptions(true,true,1);
    var dataset = initTypeaheadDataset('source', null, 20, sourceBH);
    $('.srcTA').typeahead(options,dataset);
};

过滤器可能也可以作为通用函数添加到typeahead.js中，但是我只有一个需要它们的数据集，所以我没有这样做。“替换”选项也是如此。如前所述，我对javascript/jQuery仍然比较陌生，因此我确信这个解决方案可以得到改进，但它至少使我更容易设置一个类型。