Возвращаемые результаты не отображаются с помощью typeahead и bootstrap

Question

Я проводил все свое время, чтобы решить эту проблему.

Я попытался сделать функциональный вызов ajax с помощью bootstrap + typeahead.

Если кто-то может мне помочь, это будет большим

Это мой HTML часть:

<div class="control-group"> 
    <label class="control-label">Parent</label> 
    <div class="controls"> 
    <input type="text" value="" name="parent" id="parent" autocomplete="off" data-provide="typeahead" /> 
    </div> 

Это мой JS часть:

$(document).ready(function() { 
    $('#parent').typeahead({ 
     source: function (query, process) { 
     return $.ajax({ 
      minLength: 1, 
      url: "/ajax/places/", 
      type: 'POST', 
      data : 'query='+query, 
      dataType: 'json', 
      success: function (data) { 
       return typeof data == 'undefined' ? false : process(data); 
     } 
    }); 
     } 
    }); 
}); 

I c ГЭЭ Ajax уволят, и Json, вот выдержка:

[ 
     "name": "Aix" 
    ,  "name": "Aix" 
    ,  "name": "Aix en Diois" 
    ,  "name": "Aix en Ergny" 
    ,  "name": "Aix en Issart" 
    ,  "name": "Aix en Othe" 
    ,  "name": "Aix en Provence" 
    ,  "name": "Aix la Fayette" 
    ,  "name": "Aix les Bains" 
    ,  "name": "Aix Noulette" 
    ,  "name": "Aixe sur Vienne" 
    ,  "name": "Artaix" 
    ,  "name": "Baix" 
    ,  "name": "Baixas" 
    ,  "name": "Benaix" 
    ,  "name": "Caix" 
    ,  "name": "Caixas" 
    ,  "name": "Caixon" 
    ,  "name": "Carhaix Plouguer" 
    ,  "name": "Chaix" 
] 

Если я «console.log (данные)», кажется, что все будет в порядке.

Спасибо вам за помощь!

---

Это работает, если удалить свойство «имя», как это:

[ 
     "Aix" 
    ,  "Aix" 
    ,  "Aix en Diois" 
    ,  "Aix en Ergny" 
    ,  "Aix en Issart" 
    ,  "Aix en Othe" 
    ,  "Aix en Provence" 
    ,  "Aix la Fayette" 
    ,  "Aix les Bains" 
    ,  "Aix Noulette" 
    ,  "Aixe sur Vienne" 
    ,  "Artaix" 
    ,  "Baix" 
    ,  "Baixas" 
    ,  "Benaix" 
    ,  "Caix" 
    ,  "Caixas" 
    ,  "Caixon" 
    ,  "Carhaix Plouguer" 
    ,  "Chaix" 
] 

Но теперь Как я могу использовать Id и имя?

EDIT: Я использовал этот Bootstrap typeahead ajax result format - Example и найденное решение

Я покажу вам, что я сделал с другим процессом.

Answer 1

Возврат «stuff» недействителен JSON, и, вероятно, поэтому Javascript на стороне клиента неспособен справиться с этим.

Если предположить, чтобы быть JSON объект, он должен выглядеть следующим образом:

{ "name1": "Aix" 
     , "name2": "Aix" 
     , "name3": "Aix en Diois" 

Etcetera. (Обратите внимание, что имена атрибутов должны быть уникальными. Теоретически теоретически имеет несколько атрибутов с одинаковыми именами, но это не сработает. Все парсеры JSON, с которыми я когда-либо сталкивался, будут отбрасывать все, кроме одного из соответствующих значений.)

Если предположить, что массив JSON это должно выглядеть следующим образом:

{ "Aix" 
     , "Aix" 
     , "Aix en Diois" 

и так далее. Или, может быть:

[ {"name": "Aix"} 
     , {"name": "Aix"} 
     , {"name": "Aix en Diois"} 

и т. Д., Который представляет собой массив объектов JSON.

Ссылка:

• The syntax of JSON.

Answer 2

Это мое полное решение:

<div class="control-group"> 
    <label class="control-label">Parent</label> 
    <div class="controls"> 
     <input type="text" value="" class="typeahead" autocomplete="off" data-provide="typeahead" /> 
     <input type="hidden" value="" id="parent" name="parent" /> 
    </div> 
</div> 

$(document).ready(function() { 
    $('.typeahead').typeahead({ 
     source: function (query, process) { 

      category = $("#category").val(); 
      list = []; 

      return $.ajax({ 
       minLength: 3, 
       url: "/ajax/places/", 
       type: 'POST', 
       data : { query: query, categorySon: category }, 
       dataType: 'json', 
       success: function (result) { 

        var resultList = result.aaData.map(function (item) { 

         list[item.name + ' - ' + item.code + ' (' + item.category + ')'] = item.id; 
         return item.name + ' - ' + item.code + ' (' + item.category + ')'; 

        }); 

        return process(resultList); 

       } 

      }); 
     }, 
     updater: function (item) { 
      $("#parent").val(list[item]); 
      return item; 
     } 
    }); 
});