清除输入文本旁边的图标

Question

我想知道是否有一个jquery函数可以让我在搜索框中创建一个漂浮在输入文本旁边的清晰图标，如下所示：

我无法在任何地方找到任何例子，我怀疑这是可能的，但我们将不胜感激。

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

此脚本会在您的<span>标记旁边创建一个临时<input>标记，其内容与您的<input>标记相同，因此<span>标记的宽度与你的内容。

在此处查看此行动：http://jsfiddle.net/Wa7Lf/

你唯一需要自己做的就是将它悬停在输入字段上方并添加自己的图标，但这不应该那么难。

我知道这不完美，但它应该可以帮助你前进。

Answer 2

我认为这不是你想要的，但应该朝着正确的方向前进。

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

我认为不存在“jQuery函数”。最终，如果你搜索，你会发现一个jQuery插件。我不知道。看看jQuery UI或bootstrap或其他一些框架。或者看看来自kendo ui multiselect的源代码并构建你自己的;-)

Answer 3

可能不值得为此UI元素添加另一个库。除了提议的jQuery UI / bootstrap / kendoui之外的另一个选择是添加带有 display：inline; 的图像以及'x'图像左侧的一小部分边距。

理论上你也可以在css中完成整个元素，但在你的情况下这可能是不值得的。