bootstrap 令牌字段操纵
bootstrap tokenfield manipulation
大家好,我正在尝试使用 bootstrap typehead tokenfield 完成以下任务:
1) Return 可用的令牌字段值 onkeyup。
2) 不允许输入不存在于 typehead 列表中的 tokenfields
3) 防止重复的tokenfields
代码如下:
<input type="text" class="form-control" id="tokenfield-typeahead" />
var engine = new Bloodhound({
local: [
<?php
$Result=mysql_query("select groupname from group");
while($Data=mysql_fetch_array($Result))
{
echo "{value:'$Data[0]'},";
}
?>
],
datumTokenizer: function(d) {
return Bloodhound.tokenizers.whitespace(d.value);
},
queryTokenizer: Bloodhound.tokenizers.whitespace
});
engine.initialize();
$('#tokenfield-typeahead').tokenfield({
typeahead: [null, { source: engine.ttAdapter() }]
});
简直不敢相信我花了一个半月才完成这个
<!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>
大家好,我正在尝试使用 bootstrap typehead tokenfield 完成以下任务: 1) Return 可用的令牌字段值 onkeyup。 2) 不允许输入不存在于 typehead 列表中的 tokenfields 3) 防止重复的tokenfields
代码如下:
<input type="text" class="form-control" id="tokenfield-typeahead" />
var engine = new Bloodhound({
local: [
<?php
$Result=mysql_query("select groupname from group");
while($Data=mysql_fetch_array($Result))
{
echo "{value:'$Data[0]'},";
}
?>
],
datumTokenizer: function(d) {
return Bloodhound.tokenizers.whitespace(d.value);
},
queryTokenizer: Bloodhound.tokenizers.whitespace
});
engine.initialize();
$('#tokenfield-typeahead').tokenfield({
typeahead: [null, { source: engine.ttAdapter() }]
});
简直不敢相信我花了一个半月才完成这个
<!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>