返回的結果不能用typeahead和bootstrap顯示

我花了我所有的時間來解決這個問題。返回的結果不能用typeahead和bootstrap顯示

我試圖使用bootstrap + typeahead進行函數調用ajax調用。

如果有人能幫助我，這將是偉大

這是我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); 
     } 
    }); 
     } 
    }); 
});

我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和名稱？

編輯：我用這個Bootstrap typeahead ajax result format - Example和發現解決方案

我會告訴你我做了什麼與其他過程。

來源

2013-07-15 sHaDeoNeR

這不能成爲你的JSON，這不是一個有效的JSON對象，也不是一個有效的JavaScript對象，甚至數組文本。你確定這是你得到的JSON嗎？ –

也許他鍵入方括號而不是大括號。它可能發生。 – Shmiddty

但這並不能解釋多個「名稱」屬性。（這可能是無效的JSON） – Shmiddty

返回的「東西」不是有效的JSON，這可能是客戶端Javascript無法處理它的原因。

如果假設是一個JSON對象，它應該是這樣的：

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

等等。（請注意，屬性名稱必須是唯一的，從理論上講，具有相同名稱的多個屬性是合法的，但這是行不通的。我遇到過的所有JSON解析器都會放棄除相應值之外的所有JSON解析器。

如果假設是一個JSON陣列就應該是這樣的：

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

等等。或者可能：

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

等等，這是一個JSON數組對象。

參考：

The syntax of JSON。

來源

2013-07-16 10:49:41

是的，寫了;） – sHaDeoNeR

這是我的完整的解決方案：

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

來源

2013-07-16 21:24:39 sHaDeoNeR

返回的結果不能用typeahead和bootstrap顯示

回答

相關問題