0

我把所有的时间都花在解决这个问题上。

我尝试使用 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);
        }
    }); 
        }
    });
});

我可以看到 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)”，一切似乎都很好。

谢谢你的帮助！！

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

[
         "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 ？

编辑：我使用了这个Bootstrap typeahead ajax 结果格式 - 示例并找到了解决方案

我将向您展示我在其他过程中所做的事情。

4

2 回答 2

0

这是我的完整解决方案：

<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-16T21:24:39.727 回答
0

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

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

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

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

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

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

等等。或者可能：

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

等等，它是一个 JSON 对象数组。

参考：

于 2013-07-16T10:49:41.753 回答