typeahead.js不搜索,不更新,不解决

时间:2019-02-02 07:42:46

标签: javascript php json typeahead.js

我正在尝试在数组中使用输入。搜索必须是其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".... 

0 个答案:

没有答案