Twitter bootstrap 使用ColdFusion的引导typeahead不返回结果

我有一个简单的CFC返回用户名和Id号。CFC可以工作，并已通过浏览器测试以返回JavaScript结果。没有问题。这是输出：

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

当我尝试将它与Twitter Typeahead一起使用时，我没有得到任何结果。在firebug中，我可以看到来自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>

$（文档）.ready（函数（）{
$（“#添加_用户”）。提前键入({
来源：功能（查询、流程）{
var$url=“/glv/_includes/gl_data.cfc？method=search_accounts_by_username&returnformat=json&username=“+query；
var$datas=新数组；
$datas=[“”]；
$.ajax({
url:$url，
数据类型：“json”，
键入：“获取”，
成功：功能（数据）{
$.map（数据，函数（数据）{
var组；
组={
id:data.id，
名称：data.USERNAME，
toString:函数（）{
返回JSON.stringify（this）；
//返回这个.variable；
},
toLowerCase:函数（）{
返回此.name.toLowerCase（）；
},
indexOf:函数（字符串）{
返回String.prototype.indexOf.apply（this.name，参数）；
},
替换：函数（字符串）{
var值=“”；
value+=this.name；
if（typeof（this.name）！=“未定义”）{
值+=''；
//value+=this.name；
值+=''；
}
返回String.prototype.replace.apply（“”+value+“”，参数）；
}
};
$datas.push（组）；
});
过程（数据）；
}
});
},
属性：“用户名”，
项目：10，
最小长度：2，
更新程序：函数（项）{
var item=JSON.parse（item）；
$（'#id'）.val（item.id）；
$（'#add_user'）.val（item.name）；
返回item.name；
}
});
});
管理

添加新用户
搜寻

更新-在chat中经过一些讨论后，我们能够得到一个工作原型。托尼在一个单独的网站上发布了他的工作代码。有关详细信息，请参阅

好的，这里有一个自包含的测试脚本，希望能向您展示正在发生的事情。使用GoogleChrome浏览并打开JavaScript控制台。它将允许您展开和折叠JavaScript对象，以便查看其内容。这并不是一个完整的解决方案，我只是向您展示如何分解JSON数据，希望您能够将其迁移到代码中

代码的第一部分是从中复制的。我需要查看

map

和

states

的格式。您将在控制台中看到这些

接下来，我获取了您的示例JSON，并尝试以与您在代码中使用的

map

和

usernames

相同的格式获取它。我重命名了

$中的变量。每个

循环

东西

，以避免混淆，并希望对正在发生的事情有所了解

<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>

试验
/*来自http://tatiyants.com/ */
var状态=[]；
var-map={}；
风险值数据=[
{“州代码”：“CA”，“州名称”：“加利福尼亚州”}，
{“州代码”：“AZ”，“州名称”：“亚利桑那州”}，
{“州代码”：“纽约”，“州名称”：“纽约”}，
{“州码”：“内华达州”，“州名”：“内华达州”}，
{“州码”：“哦”，“州名”：“俄亥俄州”}
];
$。每个（数据、函数（i、状态）{
/*console.log（状态）*/
map[state.stateName]=状态；
states.push（state.stateName）；
});
控制台日志（map）；
控制台日志（状态）；
/*来自http://tatiyants.com/ */
console.log（“\n---tatiyants示例的结尾---\n”）；
/*我的示例来自您的代码*/
var用户名=[]；
var-map={}；
var sampleJSON='{“列”：[“用户名”，“ID”]，“数据”：[[“jclark”，“001650472”]，[“jclark1”，“000086949”]，[“jclarke”，“002386440”]}；
var parJSON=JSON.parse（sampleJSON）；
$.each（parJSON.DATA，函数（i，stuff）{
/*console.log（stuff）*/
map[stuff[0]={“stuffid”：stuff[1]，“stuffname”：stuff[0]}；
usernames.push（stuff[0]）；
});
控制台日志（map）；
console.log（用户名）；
/*我的示例来自您的代码*/
试验

当您在Chrome浏览器中浏览到该文件时，JavaScript控制台将首先显示tatiyants.com上示例的格式，然后是我的数据示例。显然，一旦你理解了

内容，你就可以将其引用更改为任何你喜欢的内容

我会尝试以我的示例为例，通过引导typeahead运行它，看看是否可以让它处理静态数据。一旦您这样做了，就引入AJAX调用并处理该数据。我相信关键在于将ColdFusion JSON格式转换为typeahead所期望的格式。
向Miguel-F大声呼喊，以帮助他解决这个问题！他真厉害！

$（文档）.ready（函数（）{
var usern
<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>