बूटस्ट्रैप - टैग इनपुट के साथ स्वत: पूर्ण

हाय मैं बूटस्ट्रैप बूटस्ट्रैप के साथ स्वत: पूर्ण सुविधा का उपयोग करना चाहता हूं, मेरे पास बाहरी जेसन फ़ाइल भी है। मैं भी बाहरी json जोड़ा था वह कैसा दिखेगा कैसे .. किसी भी एक मुझे मदद कर सकते हैं धन्यवाद Refrence लिंक http://timschlechter.github.io/bootstrap-tagsinput/examples/बूटस्ट्रैप - टैग इनपुट के साथ स्वत: पूर्ण

कोड

<!DOCTYPE html> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 
    <link href="css/bootstrap-responsive.css" rel="stylesheet" /> 
    <link href="css/bootstrap.css" rel="stylesheet" /> 
    <link href="css/bootstrap-tagsinput.css" rel="stylesheet" /> 
    <script src="Scripts/jquery-2.0.3.js"></script> 
    <script src="Scripts/bootstrap.js"></script> 
    <script src="Scripts/bootstrap-tagsinput.min.js"></script> 
    <script> 
     $('input').tagsinput({ 
      typeahead: { 
       source: function (typehead, query) 
       { 
        $.ajax({ 
         url: "http://localhost:56558/keywords/test.html", 
         dataType: "json", 
         success: function(data) { 
          var return_list = [], i = data.length; 
          while (i--) { 
           return_list[i] = { Name: data[i].value, value: data[i].id }; 
          } 
          typeahead.process(return_list); 
         } 

        }); 
       } 
      } 
     }); 
</script> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div> 


    <input type="text" data-role="tagsinput" placeholder="Add tags" /> 


    </div> 
    </form> 
</body> 
</html> 


[ { "id": "Netta rufina", "label": "Red-crested Pochard", "value": "Red-crested Pochard" }, { "id": "Sterna sandvicensis", "label": "Sandwich Tern", "value": "Sandwich Tern" }, { "id": "Saxicola rubetra", "label": "Whinchat", "value": "Whinchat" }, { "id": "Saxicola rubicola", "label": "European Stonechat", "value": "European Stonechat" }, { "id": "Lanius senator", "label": "Woodchat Shrike", "value": "Woodchat Shrike" }, { "id": "Coccothraustes coccothraustes", "label": "Hawfinch", "value": "Hawfinch" }, { "id": "Ficedula hypoleuca", "label": "Eurasian Pied Flycatcher", "value": "Eurasian Pied Flycatcher" }, { "id": "Sitta europaea", "label": "Eurasian Nuthatch", "value": "Eurasian Nuthatch" }, { "id": "Pyrrhula pyrrhula", "label": "Eurasian Bullfinch", "value": "Eurasian Bullfinch" }, { "id": "Muscicapa striata", "label": "Spotted Flycatcher", "value": "Spotted Flycatcher" }, { "id": "Carduelis chloris", "label": "European Greenfinch", "value": "European Greenfinch" }, { "id": "Carduelis carduelis", "label": "European Goldfinch", "value": "European Goldfinch" } ]

स्रोत

2013-11-01 Rockyy

नया लिंक: http://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/ – biakaveron

सुनिश्चित नहीं हैं कि अगर इस में मदद मिलेगी, लेकिन एक ऐसी ही था मुद्दा और यह वह कोड है जो मुझे मेरे लिए काम करने के लिए मिला है।

<input id="my-tags" type="text" placeholder="Add tags" /> 
    <script type="text/javascript"> 
     var colors = ["red", "blue", "green", "yellow", "brown", "black"]; 
     var elt = $('#my-tags'); 

     elt.tagsinput('input').typeahead({ 
      local: colors, 
      prefetch: '/assets/data/countries.json' 
     }).bind('typeahead:selected', $.proxy(function (obj, datum) { 
      this.tagsinput('add', datum.value); 
      this.tagsinput('input').typeahead('setQuery', ''); 
     }, elt)); 
    </script>

अब बूटस्ट्रैप 3 और का उपयोग कर यह अब Typeahead गया है और आप ट्विटर के शामिल करने की आवश्यकता इम Typeahead कि यहाँ से

http://twitter.github.io/typeahead.js/

अलग है मैं देख रहा हूँ आपको लगता है कि शामिल नहीं था, हो सकता है यह सब कुछ है।

HTH

इसके अलावा, आप सीएसएस

/*------ typeahead ------*/ 

.twitter-typeahead .tt-query, 
.twitter-typeahead .tt-hint { 
     margin-bottom: 0; 
} 
.tt-suggestion.tt-is-under-cursor { 
    color: #fff; 
    background-color: #0081c2; 
    background-image: -moz-linear-gradient(top, #9FDD48, #8CC43E); 
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#9FDD48), to(#8CC43E)); 
    background-image: -webkit-linear-gradient(top, #9FDD48, #8CC43E); 
    background-image: -o-linear-gradient(top, #9FDD48, #8CC43E); 
    background-image: linear-gradient(to bottom, #9FDD48, #8CC43E); 
    background-repeat: repeat-x; 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff9FDD48', endColorstr='#ff8CC43E', GradientType=0) 
} 
.twitter-typeahead .tt-hint { 
    /*display: none;*/ your choice here... 
} 
.twitter-typeahead .hint-small { 
    height: 30px; 
    padding: 5px 10px; 
    font-size: 12px; 
    border-radius: 3px; 
    line-height: 1.5; 
} 
.twitter-typeahead .hint-large { 
    height: 45px; 
    padding: 10px 16px; 
    font-size: 18px; 
    border-radius: 6px; 
    line-height: 1.33; 
} 
.tt-dropdown-menu { 
    min-width: 160px; 
    margin-top: 2px; 
    padding: 5px 0; 
    background-color: #fff; 
    border: 1px solid #ccc; 
    border: 1px solid rgba(0,0,0,.2); 
    *border-right-width: 2px; 
    *border-bottom-width: 2px; 
    -webkit-border-radius: 6px; 
    -moz-border-radius: 6px; 
    border-radius: 6px; 
    -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2); 
    -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2); 
    box-shadow: 0 5px 10px rgba(0,0,0,.2); 
    -webkit-background-clip: padding-box; 
    -moz-background-clip: padding; 
    background-clip: padding-box; 
} 
.tt-suggestion { 
    display: block; 
    padding: 3px 20px; 
} 
.tt-suggestion.tt-is-under-cursor { 
    color: #fff; 
    background-color: #0081c2; 
    background-image: -moz-linear-gradient(top, #9FDD48, #8CC43E); 
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#9FDD48), to(#8CC43E)); 
    background-image: -webkit-linear-gradient(top, #9FDD48, #8CC43E); 
    background-image: -o-linear-gradient(top, #9FDD48, #8CC43E); 
    background-image: linear-gradient(to bottom, #9FDD48, #8CC43E); 
    background-repeat: repeat-x; 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff9FDD48', endColorstr='#ff8CC43E', GradientType=0) 
} 
.tt-suggestion.tt-is-under-cursor a { 
    color: #fff; 
} 
.tt-suggestion p { 
    margin: 0; 
}

स्रोत

2013-11-16 06:41:42 CaptRisky

अग्रिम खेद जोड़ना होगा - यह एक टिप्पणी के रूप में पढ़ा जाना चाहिए, नहीं एक जवाब (मेरी रैंक नहीं पर्याप्त उच्च टिप्पणी करने के लिए है)।

कोरी का उत्तर टाइपहेड ver 0.9 के लिए बिल्कुल सही है, जहां 'setQuery' विधि मौजूद है। यह कहकर, टाइपहेड 1.0 में कोई समस्या है: 'setQuery' अब मौजूद नहीं है। ऐसा लगता है कि इसकी कार्यक्षमता को 'वैल' द्वारा प्रतिस्थापित किया गया था। मैं इसे काम करने की कोशिश कर रहा था और ऐसा लगता है कि जब टैग चुने जाते हैं तो क्लास 'टीटी-हिंट' साफ़ नहीं होता है, जिससे इनपुट क्षेत्र को झुकाया जाता है। क्या किसी और ने इसमें टक्कर लगी है?

स्रोत

2014-02-07 23:49:38 tivoni

बूटस्ट्रैप - टैग इनपुट के साथ स्वत: पूर्ण

उत्तर

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