I am trying to make an input that I use within an array. the search must be either its id, name, attribute, etc.
I have developed the following code. which transnfiero the json to the input to start the search ... but does not search, only the first 10 data are displayed, (limit: 10). but these data have nothing to do with anything. I have taken the option of going to find an arrangement in json and work with it. but I can not do it.
Thank you very much for your comments. My code is as follows.
javascript
jQuery(document).ready(function($) {
var a, n, o, t, i, s;
var ListaSoportes = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.whitespace,
queryTokenizer: Bloodhound.tokenizers.whitespace,
limit: 1000,
remote:{
url:'http://localhost/..../buscar/soporte',
cache: true // defaults to true (so you can omit writing this)
}
});
ListaSoportes.initialize();
$('#m_buscar_soporte').typeahead({
hint: true,
highlight: true,
minLength: 5
},{
name: 'ListaSoportes',
items: 15,
display: 'id',
limit: 1000,
source: ListaSoportes.ttAdapter(),
templates: {
notFound: ['<div>No encontrado :( </div>'], /* Rendered if 0 suggestions are available */
pending: ['<div>Cargando...</div>'], /* Rendered if 0 synchronous suggestions available */
empty: [
'<div class="empty-message">',
'No hemos podido encontrar alguno coincidencia con los valores ingresado',
'</div>'
].join('
'),
header: [
// '<div class="row"><h6><small>Lista de soportes</small></h6>'
],
suggestion: Handlebars.compile(
'<div class="row">'+
'<div class="col-sm-2">'+
'<img style="width: 65px" src="http://localhost/....logo_FondoBlanco.png">'+
'</div>'+
'<div class="col-sm-10 ">'+
'<h6><small># {{id}}</small></h6>'+
'<h6><small>Tpo :<strong>{{tipo}} </strong>- Nombre <strong>{{name}}</strong> - Circuito: <strong>{{tipomedios}}</strong> </small></h6>'+
'<h6><small>Institución: <strong> {{medios}} - </strong> Ubicación: <strong> impsulorem metropolitana</strong></small></h6>'+
'</div>'+
'</div>'+
'<hr>'
// //'<div id="lista_buscar"><h6><small>{{id}}</small><h6>NAME: <p>{{tipo}}</p> </h6> <strong>Nombre: </strong> {{name}}</h6><span class="m-form__help">Well never share your email with anyone else.</span><hr></div>'
),
// footer: ['<div>Footer Content</div>'] Rendered at the bottom of the dataset
// when suggestions are present.
// suggestion: function (data) {
// return '<p>' + data.id + '</p>'
// }
}
})
});
view
<div id="scrollable-dropdown-menu" class="m-typeahead ">
<input type="text" name="qbs" class="form-control form-control m-input" dir="ltr" id="m_buscar_soporte" placeholder="Buscar...">
image
![ image where it shows that the data reads them correctly but the component does not work.]1
data
![![ image where it shows that the data reads them correctly but the component does not work.]](https://i.stack.imgur.com/IUrn3.png){kind=link}
[{"id":430,"nombre":null,"tipomedios":"RESTO-PUBS"},{"id":431,"nombre":"","tipomedios":"RESTO-PUBS"},{"id":432,"nombre":"","tipomedios":"RESTO-PUBS"....