私のプロジェクトでは、次のプラグインを使用してオートコンプリート効果を作成しようとしています:
このプラグインは、(単語を追加した後) テキスト ボックスにスペースを追加しない限り、正常に動作しています。バックスペースを使用して入力した単語を削除すると、オートコンプリートにより、以前に表示されていたはずの以前のリストが表示されます。
PS: アプリケーションで必要な ajax 呼び出しを介して、テキスト フィールドの全文をサーバーに渡すたびに。
これが私のコードです:
JS Fiddle ( ajax url のため動作しない)
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 呼び出しでサーバーによって返されるオブジェクト変数です)。