ブートストラップ - TagsInputでオートコンプリート

こんにちは、私はタグ入力と一緒にオートコンプリート機能を使用しますブートストラップで私は外部のjsonファイルも持っています。は、私はそれが次のようになりますどのように、外部JSONを追加した。.. は、いずれかがおかげ Refrenceリンクhttp://timschlechter.github.io/bootstrap-tagsinput/examples/ブートストラップ - TagsInputでオートコンプリート

を私を助けることができるコード

これは役立つが、同様のを持っていたかどう

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

今イムそれはもはやTYPEAHEADいるとあなたはTwitterのを含める必要が3ブートストラップを使用していないが、多分、私はあなたが含まれている必要はありませんでした見ることが

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

こちらから分離されてTYPEAHEADそれはすべてです。これはコメントではなく、答えとして読まれるべきである（私のランクはコメントすることは十分に高くない） -

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

は事前に謝罪CSSを追加する必要があります。

Coreyの答えは、 'setQuery'メソッドが存在するtypeahead ver 0.9に最適です。これは、先読み1.0に問題があります： 'setQuery'はもう存在しません。機能が 'val'に置き換えられたように見えます。私はそれを動作させようとしていましたが、タグが選択されたときにクラス 'tt-hint'がクリアされず、混乱した入力フィールドが発生するという問題があるようです。他の誰かがこれにぶつかったのですか？

出典

2014-02-07 23:49:38 tivoni

ブートストラップ - TagsInputでオートコンプリート

答えて

関連する問題