Bootstrap - AutoComplete mit TagsEingabe

Hallo Ich möchte die Autocomplete-Funktion zusammen mit Tagsinput mit Bootstrap Ich habe auch eine externe JSON-Datei. Ich hatte auch die externe json hinzugefügt, wie es aussehen wird .. kann mir dank refrence Verbindungen http://timschlechter.github.io/bootstrap-tagsinput/examples/Bootstrap - AutoComplete mit TagsEingabe

-Code helfen

<!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" } ]

Quelle

2013-11-01 Rockyy

Neuer Link: http://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/ – biakaveron

Nicht sicher, ob dies helfen wird, aber hatte ein ähnliches Problem und das ist der Code, den ich für mich arbeiten.

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

Im jetzt Bootstrap mit 3 und es nicht mehr typeahead und Sie haben zwitschert enthalten typeahead, dass von hier

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

getrennt Ich sehe Sie nicht haben, die enthalten, vielleicht das ist alles.

HTH

Auch Sie css

/*------ 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; 
}

Quelle

2013-11-16 06:41:42 CaptRisky

Apologize im Voraus hinzuzufügen haben - dies als Kommentar gelesen werden soll, keine Antwort (mein Rang ist nicht hoch genug, um einen Kommentar).

Coreys Antwort ist perfekt für typeahead ver 0.9, wo die Methode 'setQuery' existiert. In typeahead 1.0 gibt es ein Problem: 'setQuery' existiert nicht mehr. Es sieht so aus, als ob die Funktionalität durch 'val' ersetzt wurde. Ich habe versucht, es zum Laufen zu bringen, und es scheint ein Problem zu geben, bei dem der 'tt-Hinweis' der Klasse nicht gelöscht wird, wenn Tags ausgewählt werden, was ein uneinheitliches Eingabefeld verursacht. Ist noch jemand hier reingekommen?

Quelle

2014-02-07 23:49:38 tivoni

Bootstrap - AutoComplete mit TagsEingabe

Antwort

Verwandte Themen