0

そのため、オートコンプリートが機能していましたが、ソースだけがリモートphpファイルのエコーでした。このphpページはすべてのデータを生成するのに時間がかかるため、ページが停止するだけです。

したがって、代わりにjqueryにphpページをロードさせたいと思います。ロードには時間がかかるため、これはデータの 1 回の静的ロードです。

これは私が持っていたものです:

$( "#tipjob" ).catcomplete({
    delay: 0,
    source: data,
    select: function(event,ui) {
        window.open(ui.item.url);
        $tipjob.attr("value","");
    }
}).data("catcomplete")._renderItem = function(ul, item) {
    return $("<li></li>").data("item.catcomplete", item).append("<a><img src='images/" + item.color + ".png' align=right>" + item.label + "</a>").appendTo(ul);
});

そして、私はvar data = [ include php file..

だから私は source: "page.php" などを使ってみましたが、それはまったく読み込まれません。私は試した：

$(document).ready(function() {
    $.ajax({
        type: "GET",
        url: "/includes/jsonjobs.php",
        dataType: "json",
        async: true,
        success: function(data) {
            $('#tipjob').autocomplete({
                source: data
            });
        },
        error: function(result) {
            //alert("Error");
        }
    });
});

これはファイルをロードしますが、オートコンプリートも機能しません。速度が遅い場合は、オートコンプリート フィールドに「ロード中」インジケータが表示されません。(私はそのために を使用し.ui-autocomplete-loadingています)

例の負荷は、検索phpを使用するいくつかのフォームを示しています（ただし、静的データが必要です）。他の例は、データをロードしてからオートコンプリートに渡すことを示していますが、入力を開始すると「ロード」が得られません（そうすべきです）完全にロードされていない場合のみ表示されます)

とにかく、ソースの関数を作成する必要があると思うところまで来ましたが、そこでそれを失いました。

読み込まれたソースのスニペット:

[{ "label": "commit-master", "category": "Fishes -  1.504", "color": "blue", "url":     "http://bla.com/commit-master/" },
{ "label": "nightly-master", "category": "Fishes -  1.504", "color": "blue", "url":     "http://bla.com/nightly-master/" },
{ "label": "release", "category": "Food -  1.504", "color": "blue", "url": "http://bla.com/ACTIVERING-release/" },
...];

PS:ファイルはすべて同じ URL/場所にあります (クロスドメインのものはありません) 。

アップデート：

$(document).ready(function() {
    $( "#tipjob" ).catcomplete({
        delay: 0,
        source: function( request, response ) {
            $.ajax({
                url: "/includes/jsonjobs.php",
                dataType: "json",
                success: function( data ) {
                    response (data);
                }
            });
        },
        select: function(event,ui) {
            window.open(ui.item.url);
            $tipjob.attr("value","");
        }
    }).data("catcomplete")._renderItem = function(ul, item) {
        return $("<li></li>").data("item.catcomplete",  item).append("<a><img src='images/" + item.color + ".png' align=right>" + item.label + " </a>").appendTo(ul);
    });
});

ソース: jsonjobs.php と上記の例は、F12 を使用して Chrome ブラウザーでチェックアウトすると、ネットワーク呼び出しに表示されません。

更新 2: 値を " 引用符で囲んでいない json の生成の下部にエラーが見つかりました。この後、直接ソース: "jsonjobs.php" が機能します。しかし、今では、適切な読み込みインジケーターも表示されます。私が今直面している唯一の問題は、文字を入力すると常にそれが読み取られ、選択範囲が縮小されないことです. (しかし、私は今すぐ近くにあります)

更新 3: 以下はすべての値を正しく読み込み、1 回だけ読み込みます。これにより、読み込みインジケーター全体が削除されますが、私ができる最善のことです。今だけ、画像などのカテゴリを含む特別なマークアップを失いました。この下のスニペットは、まだそれを正しく行っています。

$(document).ready(function() {
$.ajax({
    type: "GET",
    url: "/includes/jsonjobs.php",
    dataType: "json",
    async: true,
    success: function(data) {
        $('#tipjob').autocomplete({
            source: data,
                            select: function(event,ui) {
                                    window.open(ui.item.url);
                                    $tipjob.attr("value","");
                            }
            }).data("catcomplete")._renderItem = function(ul, item) {
                            return $("<li></li>").data("item.catcomplete", item).append("<a><img src='images/" + item.color + ".png' align=right>" + item.label
    + "</a>").appendTo(ul);
            };
    },
    error: function(result) {
        alert("Sorry, cannot load the jenkins job data for some reason");
    }
});
});

^ 良いですが、画像はありませんが、呼び出しは 1 回だけです。

 $(function() {
            $( "#tipjob" ).catcomplete({
                delay: 0,
                source: function( request, response ) {
                    $.ajax({
                        url: "/includes/jsonjobs.php",
                        dataType: "json",
                        success: function(data) {
                                    response(data);
                        }
                    });
                },
                            select: function(event,ui) {
                                    window.open(ui.item.url);
                                    $tipjob.attr("value","");
                            }
            }).data("catcomplete")._renderItem = function(ul, item) {
                            return $("<li></li>").data("item.catcomplete", item).append("<a><img src='images/" + item.color + ".png' align=right>" + item.label
    + "</a>").appendTo(ul);
            };
    });

^ は正しい画像とすべてを表示しますが、テキストの入力時に常にロードされ、入力時に選択範囲が縮小されません。

4

2 に答える 2

0

Try this

 $( "#tipjob" ).autocomplete({
   source: "/includes/jsonjobs.php",
 });

or

see this

 $( "#tipjob" ).autocomplete({
source: function( request, response ) {
$.ajax({
url: "includes/jsonjobs.php",//if remote thant full path
dataType: "jsonp",
data: {
name_startsWith: request.term
},
success: function( data ) {
response( $.map( data.d, function( item ) {
return {
label: item.Category,
value: item.Category//or your field
}
}));
}
});
}
});
于 2013-08-09T10:58:09.323 に答える