在ASP.net中使用Twitter Typeahead MVC

Question

花了幾個小時才讓Twitter typeahead顯示自動完成值，我很難搞清楚如何替換控制器中創建和編輯操作中的所有下拉列表。

有幾個問題我知道有。首先是如何將所選對象的ID（鍵）傳遞給前端。我的JSON具有Key值，它基本上是ID和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:selected事件捕獲選定的建議項目。

下面是供您參考腳本：本地數據集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＃1：
的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>