返回的结果不能用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显示

回答

相关问题