在 ASP.net MVC 中使用 Twitter Typeahead

Question

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

我知道有几个问题。第一个是如何将所选对象的 ID（键）传递给 typeahead。我的 JSON 具有基本上是 ID 的 Key 值和作为对象名称的 Value 值。 JSON可以在下面看到。

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

在获取 JSON 并将其转换为 Javascript 对象数组后，数据将传递给应显示自动完成（预先输入）的控件。

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

我的问题是如何在显示值（值）的同时传递 ID（键），并且还能够通过将模型传递到数据库来保存它。

Answer 1

我们应该使用 Bloodhound 的 ttAdapter，它来自 typeahead bundle 和 可以从typeahead:selected 事件中捕获选定的建议项。

以下是供您参考的脚本：

TestCase#1 与本地数据集 Working fiddle

<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 使用远程数据集 Working fiddle

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