带有 Typeahead JSON 远程的 Bootstrap 3

Question

我刚刚将我的后台从 Boostrap 2 迁移到了 Boostrap 3。

我的预输入指令给我带来了一些问题。

在 bootstrap v2 上我有这个：

var typeaheadSettings = {

    source: function (query, process) {

         list = [];

         return $.ajax({

            minLength: 3,
            item: 10,
            url: "/ajax/articles/",
            type: 'POST',
            data : { query: query },
            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]);
                    $(this).attr("placeholder",item);
                }

        };

目前，明确包含 Bootstrap 3 和 typeahead (v. 0.9.3)，我在这部分：

     $(".typeahead").typeahead({

         name : 'resultArticle',
         remote : {

          url: '/ajax/articles?query=%QUERY',
          filter: function(data) {

              var resultList = data.aaData.map(function (item) {

              return item.name;

          });

          return process(resultList);

        }
     }

});

对 json 的调用是可以的，但是没有返回，我不知道我可以做些什么来调试/找到解决方案。

谢谢！

Answer 1

首先你可以考虑使用https://github.com/bassjobsen/Bootstrap-3-Typeahead。

您应该检查您的resultList 或process(resultList) 的结果是否具有以下格式：

构成数据集的各个单元称为基准。这 基准的规范形式是具有值属性和 令牌属性。 value 是代表底层证券的字符串 数据和标记的值是单个单词字符串的集合 这有助于 typeahead.js 将数据与给定查询匹配。

为了模仿你的/ajax/articles?query，我使用：

<?php
class names
{
    var $name;

    function __construct($name)
    {
        $this->name = $name;
    }   
}   

$data=array();
$data['aaData'] = array();
foreach (array('kiki','dries','wolf') as $name)
{
    $data['aaData'][] = new names($name); 
}


echo json_encode($data);
exit;

此端点总是返回一个独立于查询的三个名称的列表。此列表应显示在下拉列表中。

您（采用的）js 代码：

     $(".typeahead").typeahead({

         name : 'resultArticle',
         remote : {

          url: 'search.php?query=%QUERY',
          filter: function(data) {

              var resultList = data.aaData.map(function (item) {
              return item.name;

          });
          console.log(resultList);
          return resultList;

        },

     }

});

当我运行这个console.log(resultList); 时，会给出["kiki", "dries", "wolf"]。适合数据格式的字符串数组。 typeahead 下拉菜单也显示这些名称。 （不要忘记包含来自：https://github.com/jharding/typeahead.js-bootstrap.csshttps://github.com/bassjobsen/typeahead.js-bootstrap-css 的 CSS）

请注意，您不需要您的 return process(resultList);