web-dev-qa-db-fra.com

Comment utiliser Typeahead.js 0.10 étape par étape / à distance / prefetch / local

  • POST pour Twitter Typeahead

Cela fait maintenant 2 jours que j'essaie de comprendre et d'avoir une image claire sur la façon d'utiliser/gérer typeahead.js 0.10 afin d'utiliser des données locales, distantes et récupérées.

Honnêtement, le moteur Bloodhound n'est pas clair pour moi et des informations détaillées sur la façon de manipuler/accéder aux objets et aux tableaux json sont toujours un point d'interrogation.

Je peux faire fonctionner l'exemple local mais à chaque fois que j'essaie d'utiliser les options de prélecture ou à distance, et à part plusieurs ticks, je ne peux pas faire fonctionner.

Mon objectif avec ce post n'est pas seulement de trouver une réponse à mon problème, mais plutôt de trouver quelqu'un qui en a la connaissance complète et qui est capable, de manière très simple, d'expliquer étape par étape (avec des exemples/jsfiddles - y compris exemples json, pour savoir ce qui est réellement analysé) comment cette chose fonctionne.

Je pense que beaucoup de gens ont hâte de le comprendre et ce sera une très grande contribution (comme d'autres articles détaillés que nous connaissons existent).

J'imagine que c'est un travail acharné.

Merci d'avance pour vos contributeurs.

Suite à la suggestion ci-dessous. Mon exemple simple.

Fichier JSON

   [
    {   "name": "Pink Floyd",
        "Album": "The Best Of Pink Floyd: A Foot In The Door",
        "Label": "EMI UK",
        "Tracks":"Hey You, See Emily Play, The Happiest Days Of Our Lives, Another Brick in The Wall (Part 2), Have a cigar, Wish You Where Here, Time, The Great Gig in the Sky, Money, Comfortably Numb, High Hopes, Learning to Fly, The Fletcher Memorial Home, Shine On You Crazy Diamond, Brain Damage, Eclipse" ,
        "Price": "16.40",
        "Genre": "Rock"

    },
    {
        "name": "Depeche Mode",
        "Album": "A Question Of Time",
        "Label": "Mute",
        "Tracks":"A Question Of Time, Black Celebration, Something To Do, Stripped, More Than A Party, A Question Of Time(extended), Black Celebration" ,
        "Price": "4.68" ,
        "Genre": "Rock"
    },
    {
        "name": "Placebo",
        "Album": "Street Halo/Kindred",
        "Label": "Hyperdub Japan",
        "Tracks":"Street Halo, NYC, Stolen Dog, Kindred, Loner, Ashtray Wasp" ,
        "Price": "14.06",
        "Genre": "Future Garage"

    }
  ]

Script Typeahead

  <script>

  var products = new Bloodhound({
    datumTokenizer: function(d) {return d.name; },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    prefetch: 'http://localhost/dh/js/products.json'


  });


  products.initialize();

  $('.test1').typeahead({
    highlight: true
  },
  {
    name: 'products',
    displayKey: 'num',
    source: states.ttAdapter()

  });

  </script>

HTML

   <script type="text/javascript" src="http://localhost/dh/js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://localhost/dh/js/bootstrap.js"></script>
<script type="text/javascript" src="http://localhost/dh/js/typeahead.bundle.js"></script>

<div class="search_content">
    <input class="test1" type="text" placeholder="product">
</div>
javascriptjsontwitter-typeahead
48
Caramba

Je viens de passer quelques jours à essayer de faire fonctionner cela moi-même, et je suis totalement d'accord pour dire que ce n'est pas intuitif. En particulier, il y avait une chose sur la page de dactylographie sur Bloodhound qui essayait car je pourrais ne pas fonctionner. Par exemple la ligne suivante:

datumTokenizer: Bloodhound.tokenizers.obj.whitespace ('value') - produirait toujours une erreur car obj n'existait pas.

Pour le datumTokenizer, utilisez le formulaire suivant (où "DisplayText" est le nom de la propriété dans votre objet qui contient le texte qui sera affiché):

function (d) {
            return Bloodhound.tokenizers.whitespace(d.DisplayText);
        }

et n'oubliez pas que lorsque vous créez la typeahead, définissez displayKey sur le nom de la propriété de votre collection contenant les données de texte que vous souhaitez afficher. Pour moi, c'était toujours la même chose que la propriété que je voulais tokenize - donc ma déclaration typeahead ressemblait à ceci:

$('#my-typeahead').typeahead({
        hint: true,
        highlight: true,
        minLength: 3
        },
    {
        name: 'someName',
        displayKey: 'DisplayText',
        source: myBloodhound.ttAdapter()
    }
14
MarkM

changer en:

source: produits.ttAdapter ()

3
JeppePepp

La réponse acceptée, bien que correcte à l'époque, n'a pas beaucoup d'utilité étant donné que la frappe 0.10 est longue obsolète . La version actuelle est 1.2.1 (à partir de 2018)

Donc, répondant à la question d'origine,
Voici un tutoriel de référence qui explique étape par étape comment utiliser Typeahead avec Bloodhound (local, prefetch, à distance et une combinaison de ceux-ci) avec des violons JS basés sur la fourche toujours maintenue - Typeahead v1.2.1

1
Niket Pathak