使用 bootstrap-tagsinput 从远程 URL 加载自动完成数据答案

【问题标题】：Loading autocomplete data from remote URL with bootstrap-tagsinput使用 bootstrap-tagsinput 从远程 URL 加载自动完成数据
【发布时间】：2015-06-08 10:15:07
【问题描述】：

我想创建一个带有自动完成功能的文本输入，并从我的数据库中填充数据。

我一直试图让 bootstrap-tagsinput 工作但没有成功。从静态 json 文件填充数据工作正常。我的服务器现在返回这个（不变的结果，不管查询）：

[{"text":"Amsterdam","value":0},{"text":"A Coruna","value":1},{"text":"New York","value":2}]

当我尝试以下代码时，将执行处理程序。当我在输入框中键入内容时，我在服务器的日志中看到了 GET 请愿，但没有显示自动完成功能。

我尝试向get 添加一个额外的函数参数，只是为了在查询结束时弹出一个警告框，但没有任何反应。我尝试将第二个参数绑定到process，然后调用它来“处理数据”，但显然这也没有帮助。

有什么想法吗？

（我使用的是 bootstrap-tagsinput 0.4.2 和 jquery 2.1.4）。

<html>
  <head>
    <title>Bootstrap Tags Input</title>
    <meta name="robots" content="index, follow" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

    <link rel="stylesheet" href="bootstrap.css">
    <link rel="stylesheet" href="bootstrap-tagsinput.css">
  </head>
  <body>

  <input type="text" value="" data-role="tagsinput" />

  <script src="jquery.min.js"></script>
  <script src="bootstrap.min.js"></script>
  <script src="bootstrap-tagsinput.min.js"></script>
  <script>
  $('input').tagsinput({
    itemValue: 'value'
    , itemText: 'text'
    , typeahead: {
        source: function(query) {
          return $.getJSON('http://localhost:3000/transactions/categories/' + query);
        }
      }
    , freeInput: false
    });
  </script>
  </body>
</html>

【问题讨论】：

预期匹配查询属性"text" 或"value"？

标签： javascript jquery twitter-bootstrap twitter-bootstrap-3 bootstrap-tags-input

【解决方案1】：

错误出现在其他地方（服务器端），但在普通浏览器中它生成了有效的 json。这是针对失败的 ajax 请求。

我发布的代码确实有效。

抱歉打扰了。现已关闭。

【讨论】：