Untitled

<html>
<head>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css">

    <!-- Optional theme -->
    <link rel="stylesheet" href="css/bootstrap-theme.min.css">

    <!-- Tagsinput -->
    <link rel="stylesheet" href="tagsinput/bootstrap-tagsinput.css">

</head>

<body>
    <input value="Amsterdam,Washington" type="text" data-role="tagsinput">

    <script>
        var bestPictures = new Bloodhound({
          datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
          queryTokenizer: Bloodhound.tokenizers.whitespace,
          prefetch: 'tagsinput/cities.json',
        });

        $('input').typeahead(null, {
          name: 'best-pictures',
          display: 'value',
          source: bestPictures
        });
    </script>

    <!-- Latest compiled and minified JavaScript -->
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="tagsinput/bootstrap-tagsinput.js"></script>
    <script src="tagsinput/typeahead.bundle.js"></script>
</body>
</html>

[ "Amsterdam",
  "London",
  "Paris",
  "Washington",
  "New York",
  "Los Angeles",
  "Sydney",
  "Melbourne",
  "Canberra",
  "Beijing",
  "New Delhi",
  "Kathmandu",
  "Cairo",
  "Cape Town",
  "Kinshasa"
]