CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Laurent-514
Laurent-514

Reputation: 621

Clear icon floating next to input text

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:

enter image description here

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

Upvotes: 0

Views: 474

Answers (3)

Thew
Thew

Reputation: 15959

$('#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.

Upvotes: 1

Pippin
Pippin

Reputation: 1086

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.

Upvotes: 0

chris
chris

Reputation: 4867

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

Upvotes: 0

Related Questions