javascript - ttadapter - Cómo usar Typeahead.js 0.10 paso a paso/remote/prefetch/local

typeahead selected value

Question

• POST para Twitter Typeahead

He estado durante 2 días, tratando de comprender y tener una idea clara sobre cómo usar / administrar typeahead.js 0.10 para utilizar datos locales, remotos y recuperados.

Honestamente, el motor del sabueso no está claro para mí y la información detallada sobre cómo manipular / acceder a objetos y matrices json sigue siendo un signo de interrogación.

Puedo hacer que el ejemplo local funcione, pero cada vez que trato de usar las opciones de captación previa o remota, y además de varios tics, no puedo hacer que funcione.

Mi objetivo con esta publicación no es solo obtener una respuesta a mi problema, sino encontrar a alguien que tenga el conocimiento completo de la misma y que pueda, de una manera muy simple, explicar paso a paso (con ejemplos / jsfiddles - incluyendo json ejemplos, para saber lo que realmente se está analizando) cómo funciona esto.

Creo que muchas personas esperan comprenderlo y esta será una gran contribución (ya que existen otras publicaciones detalladas que sabemos).

Me imagino que esto es un trabajo duro.

Gracias de antemano por sus contribuyentes.

Siguiendo la sugerencia a continuación. Mi simple ejemplo.

Archivo 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 de 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>

Answer 1

cambiar a:

fuente: products.ttAdapter ()

Answer 2

Acabo de pasar algunos días tratando de hacer que esto funcione yo mismo, y estoy totalmente de acuerdo en que no es intuitivo. En particular, había una cosa en la página de encabezado sobre Bloodhound que intentaba porque podría no funcionar. Por ejemplo, la siguiente línea:

datumTokenizer: Bloodhound.tokenizers.obj.whitespace (''value'') - siempre arrojaría un error porque obj no existía.

Para datumTokenizer use el siguiente formulario (donde "DisplayText" es el nombre de la propiedad en su objeto que contiene el texto que se mostrará):

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

y recuerde que cuando crea typeahead, establezca displayKey en el nombre de la propiedad de su colección que tenga los datos de texto que desea mostrar. Para mí, esto siempre fue lo mismo que la propiedad que quería tokenizar, por lo que mi declaración typeahead se veía así:

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