如何使输入标记(令牌)与stackoverflow / gmail相同?

时间:2017-05-03 04:43:13

标签: javascript jquery twitter-bootstrap

library = https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/

这是我的代码:我需要获取所有输入值,我总是使用$("input").val()return =""input tag enter image description here

 <!DOCTYPE html>
    <html lang="en">
    <head>
	<meta charset="UTF-8">
	<title>Document</title>
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.css" rel="stylesheet" type="text/css">
	<script	src="https://code.jquery.com/jquery-3.1.1.min.js"> </script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.min.js"></script>
    </head>
    <body>
	<input type="text" value="Amsterdam,Washington,Sydney,Beijing,Cairo" data-role="tagsinput" />
    </body>
    </html>

3 个答案:

答案 0 :(得分:4)

试试这个jquery库。 bootstrap-tokenfield

HTML:

<input type="text" class="form-control" id="tokenfield" value="red,green,blue" />

Jquery:

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

Demo Fiddle

答案 1 :(得分:0)

在本实验中,您可以使用所有值调用数组:

$("input").tagsinput('items')

就像那样(打开终端并检查console.log):https://jsfiddle.net/DiogoBernardelli/bzyphmuu/

答案 2 :(得分:0)

请检查this,我能够在控制台中打印输出,

console.log($("input").val())