ट्विटर बूटस्ट्रैप प्रकार ड्रॉपडाउन सूची जैसे काम करने के लिए आगे/स्वत: पूर्ण फ़ीचर के साथ टैग का चयन करें

Question

मैं ड्रॉपडाउन सूची/< चुनना चाहता हूं> ट्विटर बूटस्ट्रैप टाइपएड का उपयोग कर ऑटोकंपलेट फ़ीचर के साथ HTML टैग व्यवहार का चयन करें। लिंक here कॉम्बो बॉक्स की सुविधा प्राप्त करता है जहां उपयोगकर्ता अपना इनपुट भी प्रदान कर सकता है। मैं उपयोगकर्ता को केवल उपलब्ध विकल्प से चुनने के लिए प्रतिबंधित करना चाहता हूं। स्वत: पूर्ण फ़ीचर के साथ ड्रॉपडाउन सूची/टैग के व्यवहार का अनुकरण करने के लिए ट्विटर बूटस्ट्रैप टाइपहेड प्लगइन को ट्वीक करने का कोई तरीका है। यहां तक ​​कि बहुत ही सरल - -

मैं

1. Adding a dropdown button to Twitter bootstrap typeahead component

Answer 1

कि वास्तव में संभव है पोस्ट करने से पहले निम्नलिखित प्रश्न कहा जाता है Typeahead जावास्क्रिप्ट को बदलने/बदल कोड का उपयोग किए बिना, यदि आप तैयार हैं हाइलाइट किए गए मिलान किए गए परिणाम दिखाने के लिए नहीं।

HTML:

<input name="test" id="test"/> 
<button id="emu-select" class="btn btn-small" type="button"> 
<i class="icon-arrow-down"></i> 
</button> 

स्क्रिप्ट:

$(document).ready(function() { 

    $("#test").typeahead({ 
     "source": ['Pennsylvania','Connecticut','New York','Maryland','Virginia'], 
     //match any item 
     matcher : function (item) { 
      return true; 
     }, 
     //avoid highlightning of "a" 
     highlighter: function (item) { 
      return "<div>"+item+"</div>" 
     } 
    }); 

    // "select"-button 
    $("#emu-select").click(function(){ 
     //add something to ensure the menu will be shown 
     $("#test").val('a'); 
     $("#test").typeahead('lookup'); 
     $("#test").val(''); 
    }); 
}); 

jsfiddle http://jsfiddle.net/davidkonrad/ZJMBE/3/

Answer 2

davidkonrads को छोटे सुधार पर काम कर कोड/उदाहरण टाइप करने के दौरान फिल्टर कार्यक्षमता रखने के लिए जवाब।

$(document).ready(function() { 

$("#test").typeahead({ 
    "source": ['Pennsylvania', 'Connecticut', 'New York', 'Maryland', 'Virginia'], 
    //match any item 
    matcher: function(item) { 
     if (this.query == '*') { 
      return true; 
     } else { 
      return item.indexOf(this.query) >= 0; 
     } 
    }, 
    //avoid highlightning of "*" 
    highlighter: function(item) { 
     return "<div>" + item + "</div>" 
    } 
}); 

// "select"-button 
$(".showAll").click(function(event) { 
    var $input = $("#test"); 
    //add something to ensure the menu will be shown 
    $input.val('*'); 
    $input.typeahead('lookup'); 
    $input.val(''); 
}); 

}); 

http://jsfiddle.net/d4kris/5rtGA/3/

Answer 3

मैं सिर्फ इतना है कि बहुत सहज अच्छी तरह से स्टाइल कॉम्बो बॉक्स में एक मानक का चयन करें तत्व बदल जाता है बूटस्ट्रैप Typeahead का उपयोग कर इस भयानक प्लगइन पाया। यह वास्तव में अच्छा लगता है, मैं इसे अपने अगले प्रोजेक्ट पर उपयोग करने जा रहा हूं।

https://github.com/danielfarrell/bootstrap-combobox

Live Example (बूटस्ट्रैप 3)