預填充jQuery UI令牌自動完成

我剛開始使用jQuery UI令牌，我想弄清楚如何預先填充字段。預填充jQuery UI令牌自動完成

<script type="text/javascript"> 
$(document).ready(function() { 
    $("#viewerMusicGenre").tokenInput([ 
     {id: 1, name: "Love Songs & Romantic"}, 
     {id: 2, name: "Pop"}, 
     {id: 3, name: "Rock"}, 
     {id: 4, name: "Country"}, 
     {id: 5, name: "Dance"}, 
     {id: 6, name: "Classical"}, 
     {id: 7, name: "Soul"}, 
     {id: 8, name: "RnB"}, 
     {id: 9, name: "Metal"}, 
     {id: 10, name: "Jazz"}, 
     {id: 11, name: "Drum and Bass"}, 
     {id: 12, name: "House"}, 
     {id: 13, name: "Children"}, 
     {id: 14, name: "Spiritual"}, 
     {id: 15, name: "Christian"}, 
     {id: 16, name: "Klezmer"}, 
     {id: 17, name: "Arabic"}, 
     {id: 18, name: "Hindu"}, 
     {id: 19, name: "Reggae"}, 
     {id: 20, name: "Industrial"}, 
     {id: 21, name: "Indie"}, 
     {id: 22, name: "Electronica"} 
    ]); 
}); 
</script>

我明白我需要把它添加到函數：

prePopulate: [ 
      {id: 3, name: "Rock"}, 
      {id: 5, name: "Dance"}, 
      {id: 8, name: "RnB"}]

我不知道如何添加，因爲我嘗試不同的方法，但總是收到sintax錯誤。

任何幫助表示讚賞。米歇爾

來源

2013-11-25 Mike Spider

http://jsbin.com/IhIkIsoW/2/edit

你不需要 ~~填充......既不~~ 「準備」檢查。只需在像jsbin中那樣添加腳本標籤之後。你也應該看看這個lib http://twitter.github.io/typeahead.js/，這可能是一個更好的選擇。

<!DOCTYPE html> 
<html> 
<head> 
<script src="http://code.jquery.com/jquery-latest.js"></script> 
<script src="http://loopj.com/jquery-tokeninput/src/jquery.tokeninput.js"></script>  
<meta charset=utf-8 /> 
<title>jQuery Tokeninput Demo</title>  
</head> 
<body>  
<input type="text" id="viewerMusicGenre"/>  
<script> 
    $("#viewerMusicGenre").tokenInput([ 
    {id: 1, name: "Love Songs & Romantic"}, 
    {id: 2, name: "Pop"}, 
    {id: 3, name: "Rock"}, 
    {id: 4, name: "Country"}, 
    {id: 5, name: "Dance"}, 
    {id: 6, name: "Classical"}, 
    {id: 7, name: "Soul"}, 
    {id: 8, name: "RnB"}, 
    {id: 9, name: "Metal"}, 
    {id: 10, name: "Jazz"}, 
    {id: 11, name: "Drum and Bass"}, 
    {id: 12, name: "House"}, 
    {id: 13, name: "Children"}, 
    {id: 14, name: "Spiritual"}, 
    {id: 15, name: "Christian"}, 
    {id: 16, name: "Klezmer"}, 
    {id: 17, name: "Arabic"}, 
    {id: 18, name: "Hindu"}, 
    {id: 19, name: "Reggae"}, 
    {id: 20, name: "Industrial"}, 
    {id: 21, name: "Indie"}, 
    {id: 22, name: "Electronica"} 
    ], { 
    prePopulate: [ 
     {id: 3, name: "Rock"}, 
     {id: 5, name: "Dance"}, 
     {id: 8, name: "RnB"} 
    ] 
    }); 
</script> 
</body> 
</html>

來源

2013-11-25 18:23:29 rafaelcastrocouto

我有相同的，但仍然沒有值顯示在頁面加載。我希望在用戶與該領域交互之前，至少有3個值在那裏。因此「預先填充」。感謝您的回覆。 –

現在我明白了你的需要！ – rafaelcastrocouto

謝謝，那麼，任何ideias？ –

預填充jQuery UI令牌自動完成

回答

相關問題