Bootstrap 3 avec typeahead JSON à distance

Question

Je viens de migrer mon backoffice de Boostrap 2 à 3. Boostrap

Mon instruction typeahead me donner quelques problèmes.

Sur bootstrap v2 J'ai eu ceci:

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

     }; 

pour l'instant, avec Bootstrap 3 et typeahead (v 0.9.3.) Inclus explicitement, je suis sur cette partie:

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

     } 
    } 

}); 

Le l'appel au json est ok, mais il n'y a pas de retour, je n'ai aucune idée de ce que je peux faire pour déboguer/trouver une solution.

Merci!

Answer 1

En premier lieu, vous pouvez envisager d'utiliser https://github.com/bassjobsen/Bootstrap-3-Typeahead.

Vous devriez vérifier si votre resultList ou le résultat de process(resultList) a le format:

Les unités individuelles qui composent des ensembles de données sont appelés points de référence. La forme canonique d'une donnée est un objet avec une propriété value et une propriété tokens. value est la chaîne qui représente la valeur sous-jacente de la référence et les jetons sont une collection de chaînes de mots simples qui aident typeahead.js à faire correspondre des datums avec une requête donnée.

Pour mimer votre /ajax/articles?query j'utilise:

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

Ce critère retourne toujours une liste de trois noms indépendants de la requête. Cette liste devrait apparaître dans la liste déroulante.

Votre (adopté) Code 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; 

     }, 

    } 

}); 

Quand je lance ce console.log(resultList); donne ["kiki", "dries", "wolf"]. Un tableau de chaînes qui correspond au format de données. La liste déroulante typeahead affiche également ces noms. (Ne pas oublier d'inclure le CSS: https://github.com/jharding/typeahead.js-bootstrap.css https://github.com/bassjobsen/typeahead.js-bootstrap-css)

Notez que vous n'avez pas besoin de votre return process(resultList);