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

我添加了代码以清除span

的click事件的值

$('.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输入添加清除和加载图标

2 个答案: