Bootstrap 3 with Typeahead JSON Remote

I just moved my back from Boostrap 2 to Boostrap 3.

My typeahead instruction gives me some problems.

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

now that Bootstrap 3 and typeahead (v. 0.9.3) are included explicitly, I am in 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 json call is fine, but there is no return, I have no idea what I can do to debug / find a solution.

Thanks!

+4
source share
1 answer

First of all, you can consider using https://github.com/bassjobsen/Bootstrap-3-Typeahead .

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

The individual units that make up the data sets are called databases. the canonical form of the database is an object with a value of value and tokens. value - a string representing the value of data and tokens - this is a set of one-word strings that help typeahead.js in matching data with a given request.

To emulate 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 returns a list of three names that are independent of the query. This list should appear in a drop-down list.

Your (accepted) 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); , he gives ["kiki", "dries", "wolf"] . An array of string that matches the data format. The typeahead popup menu also displays this name. (don't forget to include CSS from: https://github.com/jharding/typeahead.js-bootstrap.css <a2> )

Note that you do not need your return process(resultList);

+6
source

Source: https://habr.com/ru/post/1500676/


All Articles