清除圖標浮動旁邊輸入文本

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中完成整個元素，但在你的情況下這可能不值得。