JQuery: Функция Typeahead Twitter не соответствует

Question

Я использую typeahead.js, чтобы присвоить идентификатор продукта скрытому полю формы html. Это прекрасно работает, когда есть матч:

$('.products_tt .typeahead').typeahead 
    name: 'products_tt', 
    prefetch: 
     url: '/products.json', 
     ttl: 60 * 5e3 
    template: '<p><strong>{{value}}</strong> – {{year}}</p>', 
    engine: Hogan 

$('.products_tt .typeahead').on "typeahead:selected typeahead:autocompleted", (e,datum) -> 
    $('#disk_file_product_id').val(datum.id) 

очистить скрытое поле, когда поле ввода остается пустым:

$('.products_tt .typeahead').blur -> 
    if $(this).val().length == 0 
     $('#disk_file_product_id').val("") 

Но мне также нужно очистить скрытое поле, когда текст был введен в поле ввода, но нет соответствия.

Мои навыки работы с Java/Coffeescript слабы, поэтому не уверен, как это сделать?!?

Answer 1

одно из следующих должно работать:

1) Крюк в change случае Вашего входного поля в первом, и ясно #disk_file_product_id там. Ваши события typeahead позже установят это снова, если есть выбор. Это также сохраняет ваш обратный вызов blur.

$('.products_tt .typeahead').change -> 
    $('#disk_file_product_id').val("") 

2) Очистить #disk_file_product_id в opened и closed событий, вместо того, чтобы в случае change месторождения. Мне это меньше нравится.

$('.products_tt .typeahead').on "typeahead:opened typeahead:closed" -> 
    $('#disk_file_product_id').val("") 

Answer 2

Я знаю, что это несколько месяцев, но это, как вы могли бы сделать это:

Используйте JQuery, чтобы посмотреть на сколько «.tt-предложения» находятся в DOM на каждом KeyUp события , Если их нет, очистите скрытое поле.

$('.products_tt .typeahead').typeahead({ 
    name: 'products_tt', 
    prefetch: url: '/products.json', 
    ttl: 60 * 5e3 
    template: '<p><strong>{{value}}</strong> – {{year}}</p>', 
    engine: Hogan 
}).on("typeahead:selected typeahead:autocompleted", function (e, datum) { 
    $('#disk_file_product_id').val(datum.id); 
}).on('keyup', function() { 
    if($('.tt-suggestion').length === 0){ 
     $('#disk_file_product_id').val(""); 
    } 
});