6

こんにちは、ブートストラップでタグ入力と一緒にオートコンプリート機能を使用したいのですが、外部のjsonファイルもあります。外部jsonも追加しましたが、それがどのように見えるか..Refrence Links 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" } ]
4

2 に答える 2

5

事前にお詫び申し上げます - これは回答ではなく、コメントとしてお読みください (私のランクはコメントできるほど高くありません)。

Corey の回答は、「setQuery」メソッドが存在する先行入力バージョン 0.9 に最適です。そうは言っても、先行入力 1.0 には問題があります。「setQuery」はもう存在しません。その機能は「val」に置き換えられたようです。私はそれを機能させようとしていましたが、タグが選択されたときにクラス「tt-hint」がクリアされず、入力フィールドが混乱するという問題があるようです。他の誰かがこれにぶつかりましたか?

于 2014-02-07T23:49:38.593 に答える
2

これが役立つかどうかはわかりませんが、同様の問題があり、これが私のために働くコードです。

    <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 を使用しており、タイプアヘッドがなくなったため、こことは別のツイッターのタイプアヘッドを含める必要があります

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

あなたにはそれが含まれていなかったようですが、おそらくそれだけです。

HTH

また、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;
}
于 2013-11-16T06:41:42.257 に答える