Typeahead et Laravel ne retournant aucun résultat

Question

J'essaye de configurer Typeahead.js, pour employer comme caractéristique d'autosuggestion sur mon application de Laravel. Malheureusement, il ne renvoie aucun résultat, chaque fois.

Je retourne les données à l'avance pour tirer parti du stockage local, donc il n'y a pas d'interrogation de la base de données dans mon instance.

Route:

Route::get('/', function() { 
    return view('welcome', ['treatments' => Treatment::orderBy('treatment') 
     ->pluck('treatment', 'id')]); 
}); 

vue Bienvenue:

const treatments = new Bloodhound({ 
    datumTokenizer: Bloodhound.tokenizers.whitespace, 
    queryTokenizer: Bloodhound.tokenizers.whitespace, 
    local: '{{$treatments}}' 
    }); 

    $('#bloodhound').typeahead({ 
     hint: true, 
     highlight: true, 
     minLength: 1 
    }, 
    { 
     name: 'treatments', 
     source: treatments, 

     templates: { 
     empty: [ 
      '<div class="list-group search-results-dropdown"><div class="list-group-item">Nothing found.</div></div>' 
     ], 
     header: [ 
      '<div class="list-group search-results-dropdown">' 
     ] 

     } 
    }).on('typeahead:selected', function (evt, item) { 
    $('#bloodhound').text(item.id); 
    }); 

Champ de saisie:

<input type="search" name="treatment" id="bloodhound" class="form-control" 
     placeholder="Find a treatment" autocomplete="off" required> 

sortie de $treatments tableau:

local: '{"2":"Treatment 1"}' 

La dernière partie du script, devrait entrer la valeur de la sélection (ID) dans le champ de saisie, mais malheureusement cela ne fonctionne pas non plus.

Merci beaucoup.

Answer 1

La chaîne local: '{"2":"Treatment 1"}' ne vous semble-t-elle pas étrange?

Tout d'abord, il est envoyé par htmlspecialchars et toutes vos guillemets sont devenus &quote;, la deuxième valeur de local est une chaîne. Pensez-vous, typeahead peut comprendre ce que vous avez ici? Solution: obtenez vos éléments sous forme de base de données et de sortie en json-encoded. Pour éviter les citations s'échapper l'utilisation {!! !!}:

const treatments = new Bloodhound({ 
    datumTokenizer: Bloodhound.tokenizers.whitespace, 
    queryTokenizer: Bloodhound.tokenizers.whitespace, 
    local: {!! $treatments !!} 
}); 

Route:

Route::get('/', function() { 
    return view(
     'welcome', 
     ['treatments' => Treatment::orderBy('treatment')->pluck('treatment', 'id')->toJson()] 
    ); 
});