在ASP.net MVC中使用Twitter Typeahead

Question

在花了几个小时才让Twitter预先显示自动完成值后,我很难弄清楚如何在我的控制器中替换创建和编辑操作中的所有下拉列表.

我知道有几个问题.第一个是如何将所选对象的ID(键)传递给typeahead.My JSON具有Key值,该值基本上是ID和Value值,即对象的Name.JSON可以在下面看到.

[{"Key":1,"Value":"Test1"},{"Key":2,"Value":"Test2)"},{"Key":4,"Value":"Adagreb d.o.o."},{"Key":5,"Value":"AGB Nielsen."}]

获取并将JSON转换为Javascript对象数组后,数据将传递给应显示自动完成的控件(typeahead).

        var substringMatcher = function (strs) {
        //ommited for brevity
        };

        function getJson(url) {
        //ommited for brevity
        }

        function simpleArray(target) {
            var arr = [];
            $.each(target, function (i, e) {
                $.each(e, function (key, val) {
                    arr.push(val);
                    console.log(val + "-" + key);
                });
            });
            return arr;
        }

        function typeaheadSetup(control, data) {          
            $(control).typeahead({
                hint: true,
                highlight: true,
                minLength: 2
            }, {
                displayKey: 'value',
                source: substringMatcher(simpleArray(data))
            });
        }

        var companies = getJson('/Ticket/GetCompanies');
        typeaheadSetup('#idFirma', companies);

我的问题是如何在显示值(Value)时传递ID(Key),并且还能够通过将模型传递给数据库来保存它.

Answer 1

我们应该使用来自typeahead bundle的Bloodhound's ttAdapter,并且可以从typeahead:selected事件中捕获所选的建议项.

以下是供您参考的脚本:

带有本地数据集的TestCase#1 工作小提琴

<label for="company_search">Company Search:</label>
<input id="company_search" type="text" class="typeahead" />
<div id="selectedCompany"></div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://twitter.github.io/typeahead.js/releases/0.10.4/typeahead.bundle.js"></script>
<script>
   $(function () {
       var $SelectedCompany = $('#selectedCompany').hide(),
           companyList = [{"Key":1,"Value":"Test1"},{"Key":2,"Value":"Test2)"},{"Key":4,"Value":"Adagreb d.o.o."},{"Key":5,"Value":"AGB Nielsen."}];

       var companies = new Bloodhound({
           datumTokenizer: Bloodhound.tokenizers.obj.whitespace('Value'),
           queryTokenizer: Bloodhound.tokenizers.whitespace,
           local: companyList
           //,prefetch: '/path/to/prefetch'
           //,remote: {/* You can use this for ajax call*/ } 
       });

       companies.initialize();

       $('#company_search').typeahead({ highlight: true, minLength: 2 }, {
           name: 'companies', displayKey: 'Value', source: companies.ttAdapter()
       })
       .on("typeahead:selected", function (obj, company) {
           $SelectedCompany.html("Selected Company: " + JSON.stringify(company)).show();
       });

   });
</script>

编辑:带远程数据集的
TestCase#2 工作小提琴

<input class="typeahead" placeholder="Type here to Search Movie..."></input>
<div id="selectedSuggestion"></div>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://twitter.github.io/typeahead.js/releases/0.10.4/typeahead.bundle.js"></script>
    <script>
   $(function () {
       //Docs: https://github.com/twitter/typeahead.js/blob/master/doc/bloodhound.md#remote
       var $SelectedSuggestion = $('#selectedSuggestion').hide(),
           movies = new Bloodhound({
               datumTokenizer: function (datum) {
                   return Bloodhound.tokenizers.whitespace(datum.title);
               },
               queryTokenizer: Bloodhound.tokenizers.whitespace,
               remote: {
                   url: 'http://api.themoviedb.org/3/search/movie?query=%QUERY&api_key=470fd2ec8853e25d2f8d86f685d2270e',
                   filter: function (movies) {
                       return movies.results;
                   }
               }
           });

       // Initialize the Bloodhound suggestion engine
       movies.initialize();

       // Instantiate the Typeahead UI
       $('.typeahead').typeahead(null, {
           displayKey: 'title',
           source: movies.ttAdapter()
       })
           .on("typeahead:selected", function (obj, selectedItem) {
           $SelectedSuggestion.html("Selected Suggestion Item: " + JSON.stringify(selectedItem)).show();
       });
   });
    </script>