Bootstrap 3 with Typeahead JSON remote

Question

I just migrated my backoffice from Boostrap 2 to Boostrap 3.

My typeahead instruction give me some problems.

On bootstrap v2 I had this :

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

        };

for now, with Bootstrap 3 and typeahead (v. 0.9.3) included explicitly, I am on this part :

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

        }
     }

});

The call to the json is ok, but there is no return, I have no idea what I can do to debug/find solution.

Thanks!

Answer 1

In the first place you could consider to use https://github.com/bassjobsen/Bootstrap-3-Typeahead.

You should check if your resultList or the result of process(resultList) has the format of:

The individual units that compose datasets are called datums. The canonical form of a datum is an object with a value property and a tokens property. value is the string that represents the underlying value of the datum and tokens is a collection of single-word strings that aid typeahead.js in matching datums with a given query.

To mimic your /ajax/articles?query i use:

<?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;

This endpoint always return a list of three names independent of the query. This list should show in the dropdown.

Your (adopted) js code:

     $(".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;

        },

     }

});

When i run this console.log(resultList); gives ["kiki", "dries", "wolf"]. An array of string which fit the data format. The typeahead dropdown also show these name. (don't forget to include the CSS from: https://github.com/jharding/typeahead.js-bootstrap.csshttps://github.com/bassjobsen/typeahead.js-bootstrap-css)

Note you don't need your return process(resultList);