在我的项目中,我尝试使用以下插件创建自动完成效果:
这个插件工作正常,直到我没有在我的文本框中添加空格(添加单词后)。当我只是使用退格键删除输入的单词时,自动完成功能会显示之前应显示的上一个列表。
PS:每次我通过我的应用程序中必需的ajax调用将文本字段的全文传递给服务器。
这是我的代码:
JS Fiddle (由于ajax网址无法正常工作)
JS
$(function () {
var result = $('#result');
var contents = {
value: "",
data: ""
};
/* Ajax call */
result.keydown(function (event) {
if (!event.shiftKey) {
var sugData;
var text = result.val(); //.split(" ").pop();
//console.log(text);
/* Send the data using post and put the results in a div */
$.ajax({
url: "http://localhost:9999/projects/1/autocomplete/suggestions",
type: "POST",
data: "drqlFragment=" + text, // + " ",
//data: "drqlFragment=when node_database_property ",
async: false,
cache: false,
headers: {
accept: "application/json",
contentType: "application/x-www-form-urlencoded"
},
contentType: "application/x-www-form-urlencoded",
processData: true,
success: function (data, textStatus, jqXHR) {
var resData = data.suggestions;
//console.dir(resData);
for (var i = 0; i < resData.length; i++) {
resData[i].value = resData[i].keyword;
}
sugData = resData;
//console.dir(sugData);
},
error: function (response) {
//console.dir(response);
$("#result").val('there is error while submit');
}
});
console.dir(sugData);
$('#result').autocomplete({
lookup: sugData
});
}
});
});
HTML
<form id="foo">
<textarea id="result" rows="4" cols="50"></textarea>
<input type="submit" value="Send" />
</form>
很抱歉,我无法为您提供json数据,因为只要我按下某个键,服务器就会对其进行修改。 (所以,实际上它是服务器在ajax调用时返回的对象变量。)