Clear icon floating next to input text

Question

I would like to know if there is a jquery function that would let me create a clear icon floating next to input text inside a search box like this:

I could not find any example anywhere, I doubt that this is possible but a confirmation would be appreciated.

Answer 1

$('#input').keyup(function(){
    $('<span id="width">').append( $(this).val() ).appendTo('body');
    var width = $('#width').width() + 2;

    $('#width').remove();

    // variable "width" is now the margin required to be given from left to be next to the input's context
    console.log(width);
});

This script creates a temporary <span> tag next to your <input> tag, with the same content as your <input> tag, therefor having the <span> tag the same width as your content.

See it in action here: http://jsfiddle.net/Wa7Lf/

The only thing you are going to have to do on your own is hovering it above the input field and adding your own icon, but that shouldn't be that hard.

I know it isn't perfect, but it should help you forward.

Answer 2

I think that is not really what you want but should go in the right direction.

http://demos.kendoui.com/web/multiselect/index.html

An "jQuery function" is not there I think. Eventually if you search, you will find an jQuery plugin for this. I don´t know. Take a look at jQuery UI or bootstrap or some other framework out there. Or take a look at the source from the kendo ui multiselect and build you own ;-)

Answer 3

May not worth adding another library just for this UI element. The other option besides the proposed jQuery UI/bootstrap/kendoui would be to add in an image with display: inline; and a small bit of margin to the left of the 'x' image.

In theory you could also do the whole element in css, but that's likely not worthwhile in your case.