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..

所以我尝试使用源：“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：以下内容正确加载了我的所有值，并且只加载一次。这确实删除了整个加载指示器，但它是我能做的最好的。直到现在，我才失去了我的特殊标记，包括图像等和类别。下面的代码片段仍然正确。

$(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

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

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

您也可以查看一些示例。你也可以在这里查看。

于 2013-08-09T11:45:53.423 回答
0

尝试这个

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

或者

看到这个

 $( "#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 回答