बूटस्ट्रैप-typeahead.js चुनिंदा ईवेंट

Question

पर श्रोता जोड़ें, मैं बूटस्ट्रैप ट्विटर ढांचे में नया हूं, और मुझे स्वत: पूर्ण के लिए बूटस्ट्रैप-typeahead.js का उपयोग करने की आवश्यकता है, लेकिन मुझे उपयोगकर्ता द्वारा चुने गए मान को भी प्राप्त करने की आवश्यकता है Typeahead।

यह मेरा कोड है:

<input type="text" class="span3" style="margin: 0 auto;" 
        data-provide="typeahead" data- items="4" 
        data-source='["Alabama","Alaska"]'> 

मैं कैसे प्रकार Typeahead से चयनित मूल्य मिलता है और एक समारोह में इसे पारित करने के एक श्रोता जोड़ सकते हैं? उदाहरण के लिए जब मैं ExtJs का उपयोग करता हूं, तो मैं इस संरचना को लागू करता हूं:

listeners: { 
    select: function(value){ 
    ........ 
    } 
} 

मैं टाइपहेड के साथ कुछ कैसे कर सकता हूं?

Answer 1

this fork of typeahead आज़माएं। यह आपको एक अचयनित घटना, असीमित आबादी और अधिक देता है!

Answer 2

आप का उपयोग करना चाहिए "अपडेटर":

$('#search-box').typeahead({ 

    source: ["foo", "bar"], 

    updater:function (item) { 

     //item = selected item 
     //do your stuff. 

     //dont forget to return the item to reflect them into input 
     return item; 
    } 
}); 

Answer 3

मैं बस तत्व पर "परिवर्तन" घटना, चयन पर जो ट्विटर बूटस्ट्रैप Typeahead आग को देख कर यह काम कर पाने के लिए कर लिया है।

var onChange = function(event) { 
    console.log "Changed: " + event.target.value 
}; 

$('input.typeahead').typeahead({ source: ['test1', 'test2'] }); 
$('input.typeahead').on('change', onChange); 

आउटपुट 'परिवर्तित: test1' जब उपयोगकर्ता test1 का चयन करता है।

नोट: यह तब भी ईवेंट को सक्रिय करता है जब उपयोगकर्ता "एंटर" दबाता है, भले ही कोई मिलान न हो, तो आपको यह तय करना होगा कि आप यही चाहते हैं या नहीं। विशेष रूप से, यदि उपयोगकर्ता "ते" में प्रवेश करता है और फिर "test1" पर क्लिक करता है, तो आपको "te" और "test1" के लिए एक ईवेंट मिलेगा, जिसे आप डिबॉन्स करना चाहते हैं।

(संस्करण 2.0.2 ट्विटर बूटस्ट्रैप Typeahead)

Answer 4

मैं एक ही समस्या थी। आप अपने कस्टम घटनाओं बनाने के लिए इस सुविधा का उपयोग कर सकते हैं: https://github.com/finom/Functions/tree/master/FunctionCallEvent#why-is-it-needed

Answer 5

v3 चहचहाना में बूटस्ट्रैप Typeahead एक चहचहाना Typeahead के साथ बदल दिया (जो सुविधा है गिरा दिया जाएगा (अधिक घटनाओं आप Typeahead प्रोटोटाइप संरचना जानने की आवश्यकता जोड़ने के लिए) आप करना चाहते हैं और एक बहुत अधिक)

https://github.com/twitter/typeahead.js

उपयोग इस तरह: आपके उत्तर के लिए

jQuery('#autocomplete-input').on('typeahead:selected', function (e, datum) { 
    console.log(datum); 
}); 

Answer 6

धन्यवाद P.scheit। मुझे इसे अपने समाधान में जोड़ें जो उपयोगकर्ता टैब कुंजी दबाते समय स्वत: पूर्णता को संभालता है।

jQuery('#autocomplete-input').on('typeahead:selected', function (e, datum) { 
    console.log(datum); 
}).on('typeahead:autocompleted', function (e, datum) { 
    console.log(datum); 
}); 

Answer 7

$('input.typeahead').typeahead({ 
    source: ['test1', 'test2'], 
    itemSelected: function(e){ 
     ---your code here--- 
    } 
}); 

Answer 8

आप afterSelect

$('#someinput').typeahead({ 
    source: ['test1', 'test2'], 
    afterSelect: function (item) { 
     // do what is needed with item 
     //and then, for example ,focus on some other control 
     $("#someelementID").focus(); 
    } 
}); 

Answer 9

यहाँ के लिए टैब किए गए और चयनित पर बहु ​​घटना के साथ समाधान का उपयोग कर सकते हैं:

$('#remote .typeahead').on(
    { 
     'typeahead:selected': function(e, datum) { 
      console.log(datum); 
      console.log('selected'); 
     }, 
     'typeahead:autocompleted': function(e, datum) { 
      console.log(datum); 
      console.log('tabbed'); 
     } 
});