1

私のプロジェクトでは、次のプラグインを使用してオートコンプリート効果を作成しようとしています:

Devbridge jQuery オートコンプリート

このプラグインは、(単語を追加した後) テキスト ボックスにスペースを追加しない限り、正常に動作しています。バックスペースを使用して入力した単語を削除すると、オートコンプリートにより、以前に表示されていたはずの以前のリストが表示されます。

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 呼び出しでサーバーによって返されるオブジェクト変数です)。

4

0 に答える 0