帶有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.9.3.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屬性和tokens屬性的對象。 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"] 。 符合數據格式的字符串數組。 預先輸入下拉列表也顯示這些名稱。 （不要忘記包括CSS： https ： //github.com/jharding/typeahead.js-bootstrap.css https://github.com/bassjobsen/typeahead.js-bootstrap-css ）

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