I am using an typeahead.js from .js

I managed to get the field populated and style them using template options by following the examples provided.

I would like to be able to clear the selection using an icon in the inputbox like below

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

and also i'd like to add a loading icon shown like .js/

Any Suggestions?

I am using an typeahead.js from https://github./twitter/typeahead.js

I managed to get the field populated and style them using template options by following the examples provided.

I would like to be able to clear the selection using an icon in the inputbox like below

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

and also i'd like to add a loading icon shown like http://twitter.github.io/typeahead.js/

Any Suggestions?

• javascript
• jquery
• typeahead.js

2 Answers 2

i managed to get input field clear. first i added a span with close icon and set attributes as hidden.

    <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>

and then styled the icon to be on right side inside my input field.

then i added the following code

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

and i added the code to clear the value on click event for the span

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

please correct me if i have done it in the wrong way.

Add spinner loading

$('.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./images/image-selection/3.gif") no-repeat right center;
    background-size: 25px 25px;
}

Example: https://jsfiddle/sokollondon/gmv4sejt/6/