Question

我花了所有时间来解决这个问题。

我尝试使用bootstrap + typeahead使functionaly成为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);
        }
    }); 
        }
    });
});

我可以看到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和名字？

编辑：我使用了这个Bootstrap typeahead ajax result format - Example并找到了解决方案

我会告诉你我对其他过程的所作所为。

Answer 1

返回的“stuff”无效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"}

etcetera，它是一个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;
        }
    });
});

返回结果未显示typeahead和bootstrap

2 个答案: