令牌，標籤，徽章在輸入字段

請參閱我的最後一篇文章的答案。令牌，標籤，徽章在輸入字段

在我的網站上我有一個輸入字段。我想使用它，我的網頁上的用戶可以「標記」其他用戶的圖像（類似於「人xy在facebook上的這個圖片功能」）只要人開始輸入，我想顯示可能的值通過jQuery自動完成，只要人選擇一個可能的值，我想要在標籤中顯示選定的值（我說的是光學表示，例如，該值用灰色圓角矩形加下劃線表示，。像這裏SO）

這是我輸入字段：

 <label for="tokenfield">Wer ist auf diesem Bild zu sehen?</label> 
     <input type="text" class="form-control" id="tokenfield" value="example1, example2" />

來源

2015-02-10 Christian

你在說輸入的「佔位符」，它在哪裏表示用戶名？你想用jQuery動態改變它？ – CrazyPaste 2015-02-10 14:16:21

幾周前我問了上面的問題，但現在才意識到，它並沒有被問得那麼好。幾天後，我找到了解決方案。我現在想讓你知道我的解決方案，只是作爲參考或暗示其他人誰發現這個問題或具有相同的問題。

所以我現在使用這個庫GitHub Tokenfield。

而且使用這樣的：

 <label for="tokenfield">Wer ist auf diesem Bild zu sehen?</label> 
     <input type="text" class="form-control" id="tokenfield" value="red,green,blue" />

用於初始化輸入字段的基本JavaScript是：

$(document).ready(function() { 
    $('#tokenfield').tokenfield(); 
})

但是，如果你想使用jQuery的自動完成功能，你可以這樣做是這樣的：

$('#tokenfield').tokenfield({ 
    autocomplete: { 
     source: ['red','blue','green','yellow','violet','brown','purple','black','white'] 
    }, 
    showAutocompleteOnFocus: true, 
    limit: 1 
});

輸入字段被初始化爲標記字段，所以當輸入數據和按下回車，它會產生這些令牌徽章標記的東西。初始化後，它顯示3個標籤，「紅色」，「綠色」和「藍色」，該庫從輸入字段的「值」字段獲取。

我非常喜歡這個解決方案和庫，因爲它還提供了通過ajax綁定到jQuery Autocomplete的機制，這正是我想要和需要的。

我希望我能幫助某人或節省一些時間。

來源

2015-06-16 10:38:59 Christian

像這樣的事情會改變佔位符爲你鍵入：

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head runat="server"> 
    <title></title> 
    <link href="Bootstrap/css/bootstrap.css" rel="stylesheet" /> 
    <script type="text/javascript" src="Bootstrap/js/bootstrap.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $('.placeholderValue').on("keyup", function() { 
       $('.targetPlaceholder').attr('placeholder', $('.placeholderValue').val()); 
      }) 
     }); 
    </script> 
</head> 

<body> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-md-12"> 
       <div class="input-group"> 
        <input type="text" class="placeholderValue form-control" /> 
        <span class="input-group-addon" id="basic-addon1">@</span> 
        <input type="text" class="form-control targetPlaceholder" placeholder="Username" aria-describedby="basic-addon1" /> 
       </div> 
      </div> 
     </div> 
    </div> 
</body> 
</html>

來源

2015-02-10 14:23:43 CrazyPaste

謝謝你的回答。這不正是我所期待的，但也很有效;） – Christian 2015-03-17 06:39:04

令牌，標籤，徽章在輸入字段

回答

相關問題