Javascript 返回的结果未使用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>

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

我可以看到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（data）”，一切似乎都正常

谢谢你的帮助

---

如果我删除“name”属性，它会起作用，如下所示：

[
         "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和name呢

编辑：我用这个找到了解决方案

我将向您展示我对其他进程所做的操作。

返回的“内容”不是有效的JSON，这可能就是客户端Javascript无法处理它的原因

如果假设它是一个JSON对象，它应该如下所示：

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

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

等等。（请注意，属性名称必须是唯一的。从理论上讲，具有相同名称的多个属性是合法的。但是这不起作用。我遇到的所有JSON解析器都会丢弃所有对应的值，只有一个除外。）

如果假设它是一个JSON数组，它应该如下所示：

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

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

等等。或者可能：

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

等等，这是一个对象的JSON数组

参考：

---

这是我的完整解决方案：

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

父母亲
$（文档）.ready（函数（）{
$（'.typeahead'）。typeahead({
来源：功能（查询、流程）{
类别=$（“#类别”）.val（）；
列表=[]；
返回$.ajax({
最小长度：3，
url:“/ajax/places/”，
键入：“POST”，
数据：{query:query，categorySon:category}，
数据类型：“json”，
成功：功能（结果）{
var resultList=result.aaData.map（函数（项）{
列表[item.name+'-'+item.code+'（'+item.category+'）]=item.id；
返回item.name+'-'+item.code+'（'+item.category+'）；
});
返回过程（结果列表）；
}
}); 
},
更新程序：函数（项）{
$（“#父项”）.val（列表[项目]；
退货项目；
}
});
});

它不能是您的JSON，它不是有效的JSON对象，也不是有效的JavaScript对象，甚至是数组文本。你确定这就是你得到的JSON吗？也许他输入了方括号而不是花括号。这可能会发生，但这并不能解释多个“名称”属性。（这可能是无效的JSON）到底是什么问题。如果您的

源代码
函数返回一个数组，如您在“应答”中所示，则应该可以工作。