我正在尝试在数组中使用输入。搜索必须是其ID,名称,属性等。
我开发了以下代码。将json转换为输入以开始搜索...但不进行搜索,仅显示前10个数据(限制:10)。但是这些数据与任何事情都没有关系。 我已经选择了要在json中找到一个排列并使用它。但是我做不到。
非常感谢您的评论。 我的代码如下。
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('\n'),
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>'
// }
}
})
});
视图
<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 where it shows that the data reads them correctly but the component does not work.] 1
数据
[{"id":430,"nombre":null,"tipomedios":"RESTO-PUBS"},{"id":431,"nombre":"","tipomedios":"RESTO-PUBS"},{"id":432,"nombre":"","tipomedios":"RESTO-PUBS"....