應用樣式的文本框的子

Question

我有一個只包含文本框的一個簡單的搜索，但它有過濾（例如，開始與查詢「類型：」只搜索「類型」的數據庫列）。我想有是實際的搜索詞（即，「類型」）之前，該文本以這樣的方式來稱呼，它是明顯的，這是一個過濾器，而不是一個搜索的用戶。事實上，它可能看起來像StackOverflow上的標籤文本字段用戶已在標籤（見this）輸入後。到目前爲止，我有被稱爲在文本框，以確定第一項確實是一個過濾器.keypress（）方法，但我不知道如何風格過濾文本。任何幫助表示讚賞！

Answer 1

你會發現，SO標籤盒（和其他解決方案）其實並不風格輸入框本身的內容，但前面加上了標籤/過濾器格式化爲一個跨度，並相應地調整輸入框的寬度。輸入框本身已刪除所有樣式（所以沒有邊框或任何東西），邊框由一個樣式的div提供。 因此，你需要這樣的結構（順便說一句，這是一個簡化的視圖）：

<div class="i am a div styled like an input box with a border"> 
<span class="i am a filter/tag">Type:</span> 
<input type="text" class="i am actual input box with all styling removed"> 
</div> 

您需要處理添加/刪除過濾器和輸入框（基於過濾器標籤的長度）的大小調整以及（如果你只有一個過濾器，你也許可以矇混過關固定寬度輸入字段）...