分类导航

jQuery 发布时间：2022-03-30 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了jquery – 在ASP.net MVC中使用Twitter Typeahead，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

在花了几个小时才让Twitter预先显示自动完成值后,我很难弄清楚如何在我的控制器中替换创建和编辑操作中的所有下拉列表. @H_616_5@ @H_616_5@我知道有几个问题.第一个是如何将所选对象的ID(键)传递给typeahead.My JSON具有Key值,该值基本上是ID和Value值,即对象的Name. JSON可以在下面看到.

@H_616_5@

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

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

@H_616_5@

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

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

解决方法

我们应该使用Bloodhound的ttAdapter来自typeahead bundle和
可以从typeahead：SELEcted事件中捕获所选的建议项. @H_616_5@ @H_616_5@以下是供您参考的脚本：

@H_616_5@带有本地数据集Working fiddle的TESTCase#1

@H_616_5@

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

@H_616_5@编辑：
具有远程数据集Working fiddle的TESTCase#2

@H_616_5@

<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);
               },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",SELEctedItem) {
           $SELEctedSuggestion.html("SELEcted Suggestion Item: " + JSON.Stringify(SELEctedItem)).show();
       });
   });
    </script>