向 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();
});

如果我做错了，请指正。

Answer 2

添加微调器加载

$('.typeahead').typeahead(null, {
    name: 'states',
    source: states
}).on('typeahead:asyncrequest', function(e) {
    $(e.target).addClass('sLoading');
}).on('typeahead:asynccancel typeahead:asyncreceive', function(e) {
    $(e.target).removeClass('sLoading');
});

Css

.sLoading {
    background: url("http://loadinggif.com/images/image-selection/3.gif") no-repeat right center;
    background-size: 25px 25px;
}

示例：https://jsfiddle.net/sokollondon/gmv4sejt/6/

向 Twitter typeahead.js 输入添加清除和加载图标

Adding clear and loading icons to twitter typeahead.js input

javascript

jquery

typeahead.js