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 回答