2017-01-14 10 views
0

Отчаянно пытаясь выяснить, почему автозаполнение не работает с JSON объектовмашинописного Bloodhound автозаполнение косяка работы с JSON объекты

(function($){ 

    let $country = $('#country'); 

    let countries = new Bloodhound({ 
     datumTokenizer: Bloodhound.tokenizers.whitespace, 
     queryTokenizer: Bloodhound.tokenizers.whitespace, 
     prefetch: '../../data/countries.json' 
    }); 

    $country.typeahead({ 
     name: 'countries', 
     hint: true, 
     highlight: true, 
     minLength: 1 
    },{ 
     source: countries, 
     templates: { 
      empty: ['No data'].join('\n'), 
      suggestion: { 
       function (data) { 
        return '<ul><li>'+data.name+'</li></ul>'; 
       } 
      } 
     } 
    }); 

}(jQuery)); 

Все, что работает с JSON, как [ «item1», «item2», «Item3»] Но не с [{"name": "item1"}, {"name": "item2"}, {"name": "item3"}]

Мой json прав, я даже попытался использовать этот: http://twitter.github.io/typeahead.js/data/nba.json

При использовании ассоциативного массива всегда получается «Нет данных».

Также попробовал этот:

prefetch: { 
      url: '../../data/countries.json', 
      filter: function(list) { 
       return $.map(list, function(item) { 
        return { 
         name: item.name, 
         code: item.code 
        }; 
       }); 
      } 
     } 

Данные предварительной выборки, но до сих пор никаких предложений.

Конечно после каждого редактирования я убираю свое местное хранилище.

пытался также с помощью рулей

name: 'countries', 
     source: countries, 
     display: 'name', 
     templates: { 
      empty: ['No data'].join('\n'), 
      suggestion: Handlebars.compile('<p><strong>{{name}}</strong></p>') 
     } 

ответ

0

Ok поэтому я figureout его, до сих пор не знаю, почему ...

datumTokenizer: function (d) { return Bloodhound.tokenizers.whitespace(d.name); } 

Вместо

datumTokenizer: Bloodhound.tokenizers.whitespace 

Так полный рабочий код

(function($){ 

    let $country = $('#country'); 

    let countries = new Bloodhound({ 
     datumTokenizer: function (d) { return Bloodhound.tokenizers.whitespace(d.name); }, 
     queryTokenizer: Bloodhound.tokenizers.whitespace, 
     prefetch: { 
      url: '../../data/countries.json', 
      filter: function(list) { 
       return $.map(list, function(item) { 
        return { 
         name: item.name, 
         code: item.code 
        }; 
       }); 
      }, 
      cache: true 
     } 
    }); 

    $country.typeahead({ 
     name: 'countries', 
     hint: true, 
     highlight: true, 
     minLength: 1 
    },{ 
     source: countries, 
     display: function(data) { return data.name }, 
     templates: { 
      empty: ['No data'].join('\n'), 
      suggestion: function (data) { 
       return '<ul><li>'+data.name+'</li></ul>'; 
      } 
     } 
    }); 

}(jQuery)); 
+0

Ну, это может быть не полное объяснение. Если возвращенный JSON представляет собой массив строк, для двигателя это довольно просто. В противном случае движок подсказки Bloodhound должен знать datumTokenizer, чтобы он знал, что предложить на основе пользовательского запроса. В вашем случае JSON - массив объектов. Таким образом, поиск может основываться на имени или коде. Вы предоставляете эту информацию в своем datumTokenizer, чтобы соответствующие предложения соответствовали друг другу. – Surya