我有一个简单的CFC返回用户名和身份证号码。 CFC正常运行并已通过浏览器测试以返回JavaScript结果。没有问题。这是输出：
{
"COLUMNS":["USERNAME","ID"]
,"DATA":[ ["jclark","001650472"]
,["jclark1","000086949"]
,["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>
答案 0 :(得分：1)
更新 - 在聊天中进行了一些讨论后，我们得到了一个正常工作的原型。 Tony在单独的answer中发布了他的工作代码。有关详细信息，请参阅chat。
好的，这是一个独立的测试脚本，希望能告诉你发生了什么。使用谷歌浏览器浏览此内容并打开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格式转换为typeahead期望的格式。
答案 1 :(得分：1)
<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>