javascript - 将清除和加载图标添加到 twitter typeahead.js 输入

Question

我正在使用来自 https://github.com/twitter/typeahead.js 的 typeahead.js

我设法按照提供的示例使用模板选项填充字段并设置样式。

我希望能够使用输入框中的图标清除选择，如下所示

--------------------------------------------------
|                                               X|
--------------------------------------------------

我还想添加一个显示为 http://twitter.github.io/typeahead.js/ 的加载图标

有什么建议吗？

Answer 1

我设法清除了输入字段。 首先，我添加了一个带有关闭图标的跨度并将属性设置为隐藏。

    <input type="text" id="origin-rlp" name="originName" placeholder="Going from" class="text-input" required>
    <span class="icon icon-close" title='clear the search'></span>
<span class="imgload"><img class="Typeahead-spinner" src="./themes/custom/expedia_trains/images/2.gif"></span>

然后将图标样式设置为在我的输入字段内的右侧。

然后我添加了下面的代码

   $('#destination-rlp').typeahead({
        hint: true,
        highlight: true,
        minLength: 1
    }, {
        limit: 10,
        name: 'destinationName',
        display: 'name',
        value: 'name',
        source: stations,
        templates: {
            empty: [
                '<div class="empty-message">',
                'no suggessions',
                '</div>'
            ].join('\n'),
            suggestion: function(data) {
                return '<div class="address">' + data.name + '</div>';
            }
        }
    }).on('typeahead:selected', function(obj, datum) {
        $('.icon-close').show();
    }).on('typeahead:asyncrequest', function() {
        $('.Typeahead-spinner').show();
    }).on('typeahead:asynccancel typeahead:asyncreceive', function() {
        $('.Typeahead-spinner').hide();
    });

我添加了代码以清除跨度的点击事件值

$('.icon-close').click(function(){
    $('#origin-rlp').typeahead('val', '');
    $(this).hide();
});

如果我做错了，请指正。