Question

所以，我有一个工作自动完成，只有我的源是远程php文件的回声。由于这个php页面需要一些时间来生成所有数据，因此它只会停止我的页面。

因此，我希望jquery能够加载php页面。这只是数据的一次静态加载，因为加载它需要一些时间。

这就是我所拥有的：

$( "#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/" },
...];

P.S。：文件都在同一个网址/位置（所以没有跨网域内容）

更新

$(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：下面正确加载我的所有值，只加载一次。这确实删除了整个加载指示器，但它是我能做的最好的。只是现在我放弃了我的特殊标记，包括图像和类别。这个下面的片段仍然是正确的。

$(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);
            };
    });

^确实显示正确的图像和所有图像，但在输入文本时不断加载，并且在输入时不会减少选择。

Answer 1

试试这个

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

或

参见 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
}
}));
}
});
}
});

Answer 2

如果您的静态列表不依赖于IDs（与HTML key-value标记中常用的<option>对一样）并且您正在使用HTML5，则可以尝试也可以使用datalist标记。

这不需要您自己实现自动填充。浏览器会为您执行此操作。这与几乎所有现代浏览器兼容。

您也可以查看一些examples。您也可以查看here。

Jquery自动完成与静态远程URL和加载指示器

2 个答案: