Bootstrap typeahead ajax result format - Przykład

Question

Używam Bootstrap z nagłówkiem z funkcją ajax i chcę wiedzieć, jaki jest prawidłowy format wyniku Jsona, aby zwrócić ID i opis. Potrzebuję identyfikatora do powiązania wybranego elementu z modelem mvc3.

Jest to kod:

[Html] 

    <input id="myTypeahead" class='ajax-typeahead' type="text" data-link="myUrl" data-provide="typeahead" /> 


    [Javascript] 

    $('#myTypeahead').typeahead({ 
     source: function (query, process) { 
      return $.ajax({ 
       url: $('#myTypeahead').data('link'), 
       type: 'post', 
       data: { query: query }, 
       dataType: 'json', 
       success: function (jsonResult) { 
        return typeof jsonResult == 'undefined' ? false : process(jsonResult); 
       } 
      }); 
     } 
    }); 



This works properly when I return a simple list of strings, for example: 
{item1, item2, item3} 

But I want to return a list with Id, for example: 
{ 
{Id: 1, value: item1}, 
{Id: 2, value: item2}, 
{Id: 3, value: item3} 
} 

Jak przetworzyć ten wynik w Ajax "success: function()"?

To bardzo proste z jquery Autocomplete, ponieważ mogę zwrócić listę obiektów Json.

[jquery Autocomplete process data example] 
...    
success: function (data) { 
       response($.map(data, function (item) { 
        return { label: item.Id, value: item.Value, id: item.Id, data: item }; 
       }) 
... 

Ale to nie działa z boostrap Typeahead.

Czy ktoś może mi pomóc?

Dzięki.

Answer 1

Próbuję przez dwa dni i wreszcie mogę to działa. Bootstrap Typeahead nie obsługuje domyślnie tablicy obiektów, a jedynie tablicę ciągów znaków. Ponieważ funkcje "matcher", "sorter", "updater" i "highlighter" oczekują ciągów jako parametru.

Zamiast tego "Bootstrap" obsługuje konfigurowalne funkcje "matcher", "sorter", "updater" i "highlighter". Możemy więc przepisać te funkcje w opcjach Typeahead.

II używał formatu Json i ograniczał identyfikator do ukrytego html.

Kod:

$('#myTypeahead').typeahead({ 
    source: function (query, process) { 
     return $.ajax({ 
      url: $('#myTypeahead').data('link'), 
      type: 'post', 
      data: { query: query }, 
      dataType: 'json', 
      success: function (result) { 

       var resultList = result.map(function (item) { 
        var aItem = { id: item.Id, name: item.Name }; 
        return JSON.stringify(aItem); 
       }); 

       return process(resultList); 

      } 
     }); 
    }, 

matcher: function (obj) { 
     var item = JSON.parse(obj); 
     return ~item.name.toLowerCase().indexOf(this.query.toLowerCase()) 
    }, 

    sorter: function (items) {   
     var beginswith = [], caseSensitive = [], caseInsensitive = [], item; 
     while (aItem = items.shift()) { 
      var item = JSON.parse(aItem); 
      if (!item.name.toLowerCase().indexOf(this.query.toLowerCase())) beginswith.push(JSON.stringify(item)); 
      else if (~item.name.indexOf(this.query)) caseSensitive.push(JSON.stringify(item)); 
      else caseInsensitive.push(JSON.stringify(item)); 
     } 

     return beginswith.concat(caseSensitive, caseInsensitive) 

    }, 


    highlighter: function (obj) { 
     var item = JSON.parse(obj); 
     var query = this.query.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, '\\$&') 
     return item.name.replace(new RegExp('(' + query + ')', 'ig'), function ($1, match) { 
      return '<strong>' + match + '</strong>' 
     }) 
    }, 

    updater: function (obj) { 
     var item = JSON.parse(obj); 
     $('#IdControl').attr('value', item.id); 
     return item.name; 
    } 
}); 

Answer 2

Uwaga: Widziałem @ EralpB`s komentarz "Czy to jest nadal najlepszym sposobem, aby wykonać to zadanie?"

Tak, rozwiązanie @Gonzalo działa, ale wydaje się dziwne (jak krocze, zwłaszcza po skorzystaniu jQuery autouzupełniania) - to powinno działać „z pudełka” .Better jest użycie tego - Bootstrap-3-Typeahead. To obsługuje tablicę obiektów w wyniku: Format - [{id: .., nazwa ...}, ..., {id .., nazwa ... }]. Przykład wydania OP:

.... 
source: function (query, process) { 
    return $.ajax({ 
     ...... 
     success: function (result) {    
      var resultList = []; 

      $.map(result,function (Id,value) { 
       var aItem = { id: Id, name: value}; 
       resultList.push(aItem); 
      }); 

      return process(resultList); 
     } 
    }); 
    },