Question

我刚开始使用jQuery UI Token，我正在试图弄清楚如何预先填充字段。

<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错误。

感谢任何帮助。米歇尔

Answer 1

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>

预填充jQuery UI令牌自动完成

1 个答案: