Использование Twitter Typeahead в ASP.net MVC

После пары часов, потраченных только на то, чтобы заставить Twitter отображать значения автозаполнения, мне трудно понять, как заменить все раскрывающиеся списки в действиях «Создать» и «Редактировать» в моем контроллере.

Есть пара проблем, о которых я знаю. Во-первых, как передать идентификатор (ключ) выбранного объекта в заголовок типа. Мой JSON имеет значение ключа, которое в основном является идентификатором, и значением значения, которое является именем объекта. 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);

Мой вопрос заключается в том, как передать идентификатор (ключ) при отображении значения (значение), а также сохранить его, передав модель в базу данных.


jquery asp.net-mvc twitter-bootstrap-3 typeahead.js twitter-typeahead
person wegelagerer    schedule 29.10.2014    source источник

Ответы (1)


arrow_upward
7
arrow_downward

Мы должны использовать ttAdapter Bloodhound, который поступает из пакета typeahead и может захватывать выбранный элемент предложения из события 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>
person Koti Panga    schedule 30.10.2014
comment
Обновленный ответ с тестовым примером № 2 - person Koti Panga; 30.10.2014
comment
@kraeg удаленный URL устарел в скрипте, проверьте обновленную скрипту jsfiddle.net/vpanga/bgvycpvg/15 - person Koti Panga; 24.09.2015