0

我可以使用以下代码让用户在填写表格时只选择一个自动完成选项，效果很好：

var validOptions = ["Bold", "Normal", "Default", "100", "200"]
previousValue = "";

$('#ac').autocomplete({
    autoFocus: true,
    source: validOptions
}).keyup(function() {
    var isValid = false;
    for (i in validOptions) {
        if (validOptions[i].toLowerCase().match(this.value.toLowerCase())) {
            isValid = true;
        }
    }
    if (!isValid) {
        this.value = previousValue
    } else {
        previousValue = this.value;
    }
});

但是，我使用 ajax 来动态创建数组，如下所示，因此我没有数组的名称，例如上面的validOptions。

问题如何通过以下方法使用上述“方式”

$('#ac').autocomplete({
    autoFocus: true,
    source: "/pages/includes/getAgent.php",
    select: function( event, ui ) {
        $('#autoc1').val(ui.item.agent_name);
        $('#comm').val(ui.item.commission_percent);
        return false;
    }
    }).keyup(function() {
        var isValid = false;

        // here is the issue, the new data is not called validOptions
        for (i in validOptions) {
        if (validOptions[i].toLowerCase().match(this.value.toLowerCase())) {

            isValid = true;
        }
    }
        if (!isValid) {
            this.value = previousValue
        } else {
            previousValue = this.value;
        }
    }).data( "ui-autocomplete" )._renderItem = function( ul, item ) {
        return $( "<li>" )
        .append( "<a>" + item.agent_name + "</a>" )
        .appendTo( ul )
    };
4

1 回答 1

1

您将无法使用keyup事件。相反，您需要设置source功能并发出您自己的 AJAX 请求。在该请求的回调中测试返回结果的长度是否有效，或设置服务器端返回具有不同属性的 JSON 以识别结果数量和结果本身

在函数中创建自己的 AJAX 示例请参阅带有缓存的远程数据演示的源代码source

与其更改用户意外行为的输入值，不如设置错误指示器和/或调整自定义_renderItem方法以显示No results。这将允许用户查看输入的内容，以防输入错误。

如果没有返回值，另一种显示方式no results是在 AJAX 回调中操作数据

于 2013-03-30T11:32:40.710 回答