使用 ColdFusion 引导预输入不返回结果答案

【问题标题】：Bootstrap typeahead with ColdFusion not returning results使用 ColdFusion 引导预输入不返回结果
【发布时间】：2013-08-06 15:19:14
【问题描述】：

我有一个简单的 CFC 返回用户名和 ID 号。 CFC 可以正常工作，并且已经在浏览器上进行了测试以返回 JavaScript 结果。没有问题。这是输出：

{
   "COLUMNS":["USERNAME","ID"]
   ,"DATA":[ ["jclark","001650472"]
             ,["jclark1","0000869‌49"]
             ,["jclarke","002386440"]
           ]
}

当我尝试将它与 Twitter Typeahead 一起使用时，我没有返回任何结果。在萤火虫中，我可以看到来自 CFC/JS 的成功响应，但是一旦发生这种情况，我就会收到错误 JS 错误。

return this.name.toLowerCase();
This.name is undefined

似乎我的数据没有从 CFC 正确返回。

这是我的 js/html

<script>
$(document).ready(function () {
    $('#add_user').typeahead({
        source: function (query, process) {
            var $url = "/glv/_includes/gl_data.cfc?method=search_accounts_by_username&returnformat=json&username=" + query;
            var $datas = new Array;
            $datas = [""];
            $.ajax({
                url: $url,
                dataType: "json",
                type: "GET",
                success: function (data) {
                    $.map(data, function (data) {
                        var group;
                        group = {
                            id: data.ID,
                            name: data.USERNAME,
                            toString: function () {
                                return JSON.stringify(this);
                                //return this.variable;
                            },
                            toLowerCase: function () {
                                return this.name.toLowerCase();
                            },
                            indexOf: function (string) {
                                return String.prototype.indexOf.apply(this.name, arguments);
                            },
                            replace: function (string) {
                                var value = '';
                                value += this.name;
                                if (typeof (this.name) != 'undefined') {
                                    value += ' <span class="pull-right muted">';
                                    //value += this.name;
                                    value += '</span>';
                                }
                                return String.prototype.replace.apply('<div style="padding: 10px; font-size: 1em;">' + value + '</div>', arguments);
                            }
                        };
                        $datas.push(group);
                    });
                    process($datas);
                }
            });
        },
        property: 'username',
        items: 10,
        minLength: 2,
        updater: function (item) {
            var item = JSON.parse(item);
            $('#id').val(item.id);
            $('#add_user').val(item.name);
            return item.name;
        }
    });

});
</script>

<div class="span9">
    <h1>Administration</h1>
    <hr>
    <h3>Add New User</h3>
    <div class='search'>
        <form class="form-search">
        <input type="text" class="input-medium search-query" placeholder="Username" data-provide="typeahead" id="add_user" name="add_user" autocomplete="off">
        <button type="submit" class="btn">Search</button>
        </form>
    </div>
</div>

【问题讨论】：

您是否偶然看到两个斜杠// 预先添加到来自您的 CFC 的 JSON 返回值？如果是这样，您将需要在处理退货之前剥离它们。参考 - stackoverflow.com/questions/15501123/…
这是输出{"COLUMNS":["USERNAME","ID"],"DATA":[["jclark","001650472"],["jclark1","000086949"],["jclarke","002386440"]]}
我们的开发服务器中的设置是关闭的，没有//前缀
好的，我想这可能会吸引你。我的建议是简化您的代码以调试问题。进行 AJAX 调用并提醒返回的值或使用浏览器的 JS 控制台。如果看起来没问题，那么添加另一段代码并再次测试，等等。
我从警报[object Object]得到这个输出

标签： twitter-bootstrap coldfusion coldfusion-9 bootstrap-typeahead

【解决方案1】：

更新 - 经过一些聊天讨论后，我们得到了一个工作原型。 Tony 在单独的answer 中发布了他的工作代码。详情请见chat。

好的，这是一个独立的测试脚本，希望能向您展示发生了什么。使用 Google Chrome 浏览至此并打开 JavaScript 控制台。它将允许您展开和折叠 JavaScript 对象，以便查看它们的内容。这不是一个完整的解决方案，我只是向您展示如何分解 JSON 数据，希望您能够将其迁移到您的代码中。

代码的第一部分是从tatiyants.com example 复制而来的。我需要查看map 和states 的格式。您将在控制台中看到这些。

接下来，我获取了您的示例 JSON，并尝试以与您在代码中使用的 map 和 usernames 相同的格式获取它。我将$.each 循环中的变量重命名为stuff 以避免混淆，并希望对正在发生的事情有所了解。

<html>
    <head>
    <title>Test</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script>
        /* Example from http://tatiyants.com/ */
        var states = [];
        var map = {};
        var data = [
            {"stateCode": "CA", "stateName": "California"},
            {"stateCode": "AZ", "stateName": "Arizona"},
            {"stateCode": "NY", "stateName": "New York"},
            {"stateCode": "NV", "stateName": "Nevada"},
            {"stateCode": "OH", "stateName": "Ohio"}
        ];
        $.each(data, function (i, state) {
            /* console.log(state); */
            map[state.stateName] = state;
            states.push(state.stateName);
        });
        console.log(map);
        console.log(states);
        /* Example from http://tatiyants.com/ */

        console.log("\n--- end of tatiyants example ---\n");

        /* My example from your code */
        var usernames = []; 
        var map = {}; 
        var sampleJSON = '{"COLUMNS":["USERNAME","ID"],"DATA":[ ["jclark","001650472"],["jclark1","000086949"],["jclarke","002386440"] ]}';
        var parJSON = JSON.parse(sampleJSON);
        $.each(parJSON.DATA, function (i, stuff) {
            /* console.log(stuff); */
            map[stuff[0]] = { "stuffid":stuff[1], "stuffname":stuff[0] }; 
            usernames.push(stuff[0]); 
        });
        console.log(map);
        console.log(usernames);
        /* My example from your code */
    </script>
    </head>
    <body>
        <h3>Test</h3>
        <div>

        </div>
    </body>
</html>

当您在 Chrome 中浏览到此文件时，JavaScript 控制台将首先向您显示 tatiyants.com 上示例中的格式，然后是我的数据示例。显然，一旦您理解了 stuff 引用，您就可以将其更改为您喜欢的任何内容。

我会尝试以我的示例并通过 bootstrap typeahead 运行它，看看您是否可以让它与静态数据一起工作。完成后，请引入您的 AJAX 调用并处理该数据。我相信关键是将 ColdFusion JSON 格式转换为预先输入所期望的格式。

【讨论】：

【解决方案2】：

感谢 Miguel-F 帮助解决这个问题！他摇滚！

<Script>
$(document).ready(function() {
          var usernames = []; 
         var map = {}; 
    $("#add_user").typeahead({
        minLength: 3,

        source: function(query, process) {
              $.post('/glv/_includes/gl_data.cfc?method=search_accounts_by_username& returnformat=json&username=' + query, { limit: 8 }, function(data) {
                alert(data);
                var parJSON = JSON.parse(data);
                $.each(parJSON.DATA, function (i, stuff) {
                  map[stuff[0]] = { "id":stuff[1], "username":stuff[0] }; 
                  usernames.push(stuff[0]); 
                });
                process(usernames);
          });
         },
          matcher: function (item) {
              if (item.toLowerCase().indexOf(this.query.trim().toLowerCase()) != -1) {
                  return true;
              }
          },
          sorter: function (items) {
              return items.sort();
          },
          highlighter: function (item) {
              var regex = new RegExp( '(' + this.query + ')', 'gi' );
              return item.replace( regex, "<strong>$1</strong>" );
          },
          updater: function (item) {
              selectedState = [item].username;
              var person = map[item];
              $('#user_id').val(person.id);
              return item;
          }     
    });
  });
</script>

【讨论】：