2015-06-22 22 views
6

मेरे पास कई टेक्स्ट इनपुट के साथ एक फॉर्म है जिसके लिए उनमें से 10 मैं Bloodhound के साथ typeahead.js का उपयोग करना चाहता हूं। मैंने इसे 2 में से काम करने के लिए काम किया है - दोनों में प्रीफेच और रिमोट डेटा स्रोत शामिल हैं। लेकिन टाइपहेड/ब्लडहाउंड के प्रत्येक उदाहरण के लिए एक उचित मात्रा में jQuery कोड है और मैं उत्सुक हूं कि किसी ने अलग-अलग डेटा स्रोतों के साथ कई अलग-अलग इनपुट तत्वों को संभालने के लिए टाइपएड/ब्लडहाउंड "जेनेरिक" करने का प्रयास किया है? यह इसके लायक होने की तुलना में अधिक परेशानी हो सकती है, लेकिन मैं पृष्ठ को लोड करने वाले कोड की मात्रा के बारे में थोड़ा चिंतित हूं।विभिन्न स्रोतों के साथ typeahead.js का उपयोग कर प्रत्येक इनपुट एकाधिक समेकित किया जा सकता है?

मेरा पर्यावरण स्प्रिंग/एमवीसी, हाइबरनेट (ओरेकल डीबी), बूटस्ट्रैप है।

यहां एक टाइपहेड/ब्लडहाउंड इंस्टेंस का नमूना है। यह एक फ़ंक्शन में है क्योंकि मैं पंक्तियों के इनपुट को गतिशील रूप से जोड़ रहा हूं इसलिए मुझे उस पंक्ति में टेक्स्ट इनपुट पर टाइपहेड सक्षम करने के लिए एक नई पंक्ति जोड़ने के बाद इस फ़ंक्शन को कॉल करना होगा।

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/बूटस्ट्रैप के एक "टेम्पलेट" संस्करण है कि तब प्रत्येक व्यक्ति पाठ इनपुट के लिए instantiated जा सकती है, पैदा कर दी है, तो है।

उत्तर

2

क्षमा करें अगर यह एक स्पष्ट उत्तर के साथ एक प्रश्न था, लेकिन मैं जावा, स्प्रिंग/हाइबरनेट, jQuery, आदि के लिए नया हूं। Firebug का उपयोग मैं क्या दोनों Typeahead और खोजी कुत्ता के लिए आवश्यक यह पता लगाने में सक्षम था और के साथ आया था निम्नलिखित:

//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 

मैं अभी भी यह अधिक सामान्य बनाने पर काम कर रहा हूँ और मैं में सभी मापदंडों के बारे में पागल नहीं हूँ ब्लडहाउंड प्रारंभिक फ़ंक्शन पर कॉल करें, लेकिन चूंकि मेरे पास पृष्ठ पर लगभग 10 या अधिक टाइपहेड-सक्षम नियंत्रण होंगे, इसलिए शेष कोड को केवल कुछ पंक्तियों के साथ जोड़ना काफी आसान होगा। उन टाइपहेड नियंत्रण जो पृष्ठ पर गतिशील रूप से बनाई गई पंक्तियों का हिस्सा नहीं हैं, उन्हें प्रारंभिकरण के लिए अलग-अलग फ़ंक्शंस की आवश्यकता नहीं होगी, लेकिन कोड की केवल 3 पंक्तियों के साथ प्रारंभ किया जा सकता है। मैं निश्चित रूप से सुधार के लिए किसी भी टिप्पणी या सुझाव के लिए खुला हूं, जिसमें कोई विचार भी शामिल है कि यह एक बेवकूफ विचार है।

0

मैंने अभी देखा है कि इस प्रश्न पर एक वरदान था इसलिए मैंने सोचा कि मैं अपने मूल उत्तर में किए गए कुछ अनुकूलन साझा करूंगा।

आधार कार्य एक में शामिल फ़ाइल में स्थित हैं:

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) Typeahead:

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

उपर्युक्त दोनों में जेसन में एकल आइटम होते हैं, उदा।,

[ "कप", "कप", "औंस", "औंस", "पौंड", "पाउंड", "चम्मच", "चम्मच", "चम्मच", "चम्मच"]

प्रीफ़ेच और रिमोट दोनों को थोड़ा अधिक जटिल जेसन के साथ प्रारंभ करने के लिए:

{"सामग्री": [{"आईडी": "142", "नाम": "आटा"}, {"id": "144 "," नाम ":" चीनी "}]}

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 में सामान्य कार्यों के रूप में जोड़ा जा सकता है, लेकिन मेरे पास केवल एक डेटासेट था जिसकी आवश्यकता थी इसलिए मैंने ऐसा नहीं किया। 'प्रतिस्थापन' विकल्प के लिए वही। जैसा कि पहले बताया गया है, मैं अभी भी जावास्क्रिप्ट/jQuery के लिए अपेक्षाकृत नया हूं इसलिए मुझे यकीन है कि इस समाधान को बेहतर किया जा सकता है, लेकिन यह कम से कम मेरे लिए एक टाइपहेड स्थापित करना बहुत आसान है।

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

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