带预输入和 JSON 的引导标记字段答案

【问题标题】：bootstrap tokenfield with typeahead and JSON带预输入和 JSON 的引导标记字段
【发布时间】：2015-08-09 17:38:15
【问题描述】：

我正在尝试使用 JSON 实现带有预先输入的引导标记字段。

<input type="text" class="span" id="typeahead" data-provide="typeahead">

我有这两个功能，它们单独工作得很好，但是当我尝试将它们结合起来时，它就不起作用了。

提前输入：

 $("#typeahead").typeahead({
    source: function(typeahead,query){
        $.ajax({
            url: 'getgoups.php',
            type:'POST',
            data:'query'+query,
            dataType:'JSON',
            async:false,
            success:function(data){
                typeahead.process(data);
            }
        });
    }
})

令牌字段

当我必须将两者结合起来时，我会卡住。

$("#typeahead").tokenfield({
     typeahead:[ source: ]
});

【问题讨论】：

任何具体错误？从帖子中看你的 json 是什么样的？

标签： json twitter-bootstrap bootstrap-typeahead bootstrap-tokenfield

【解决方案1】：

经过这么多次尝试，我终于明白了：

<!DOCTYPE>
<html lang="en">

<head>
    <title>Andani Masikhwa</title>

    <link href="bootstrap-tokenfield.css" type="text/css" rel="stylesheet">
    <!--<link href="tokenfield-typeahead.css" type="text/css" rel="stylesheet">-->

</head>
<style>
.tt-query,
.tt-hint {
    width: 396px;
    height: 30px;
    padding: 8px 12px;
    font-size: 24px;
    line-height: 30px;
    border: 2px solid #ccc;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    outline: none;
}

.tt-query {
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.tt-hint {
    color: #999
}

.tt-dropdown-menu {
    width: 422px;
    margin-top: 12px;
    padding: 8px 0;
    background-color: #fff;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, 0.2);
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
    -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
    box-shadow: 0 5px 10px rgba(0,0,0,.2);
}

.tt-suggestion {
    padding: 3px 20px;
    font-size: 18px;
    line-height: 24px;
}

.tt-suggestion.tt-is-under-cursor {
    color: #fff;
    background-color: #0097cf;

}
</style>


<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
 <script type="text/javascript" src="bootstrap-tokenfield.js" charset="UTF-8"></script>
<script src="http://cdn.jsdelivr.net/typeahead.js/0.9.3/typeahead.min.js"></script>
<script>
$(document).ready(function(){
    $('#search').tokenfield({
    typeahead:{
        name : 'sear',
        remote: {
            url : 'connection.php?query=%QUERY'
        },
        success:function(data){
            process(data);
        }

    }

    });
});
</script>
<body>
    <input type="text" class="form-control"  id="search" value="andani" />
</body>

</html>

【讨论】：

请解释您的解决方案，以便其他人更容易理解。