Question

我需要一些jquery插件，因为他们在大多数航班预订网站上使用它，你必须从组合者那里选择出发/到达机场。

我环顾四周，但我找不到任何好的解决方案。我需要一个自动完成的组合框，它将一直保持打开状态，直到用户从可能值列表中选择一个项目，并且它必须支持一些隐藏的id号码而不是文本 - jquery上的插件通常只发送文本值。

现在我使用http://blog.idealmind.com.br/geral/simple-autocomplete-jquery-plugin/ - 但问题是用户可以通过键盘输入列表中没有的任何内容。

我可以使用更好的插件吗？我自己并不是一个jquery或js程序员......

Answer 1

mm ....我面临同样的问题，无法解决它。我认为你将不得不编辑插件。

你说

但问题是用户可以输入任何不能输入的内容通过键盘在列表中。

问题是您无法禁用文本字段，因为根据您在文本字段中键入的内容添加了自动完成值。

一种可能的方法是，您可以在文本字段的on-change或on-blur功能中检查没有建议值。如果没有建议，那么您输入了错误的值。所以你可以给出一条错误信息。

Answer 2

jQuery UI的插件实际上允许您通过文本值和整数作为返回类型发送。

以下是我用于自动完成的一般代码。

$("#c_where").autocomplete({
    autoFill: true,
    mustMatch: true,
    selectFirst: true,
    source: function(request, response) {
        $.ajax({
            type: "post",
            url: "inc/ajax/json/hotels.php", // Upload this aswell
            data: {
                maxRows: 12,
                term: request.term
            },
            success: function(data) {
                response($.map(JSON.parse(data), function(item) {
                    return {
                        label: item.name,
                        value: item.name,
                        id: item.hid
                    }
                }));
            }
        });
    },
    change: function(event, ui) {
        /*if ($(".ui-autocomplete li:textEquals('" + $(this).val() + "')").size() == 0) {
            $(this).val('');
        }*/
        if (!ui.item) {
            $(this).val('');
        }
    },
    select: function(event, ui) {
        $('#c_where').data("id", ui.item.id);
    }
}).live('keydown', function (e) {
    var keyCode = e.keyCode || e.which;
    if((keyCode == 9 || keyCode == 13) && ($(".ui-autocomplete li:textEquals('" + $(this).val() + "')").size() == 0)) {
        $(this).val($(".ui-autocomplete li:visible:first").text());
    }
});

Answer 3

这里有两个不同的问题。

发送隐藏ID应该使用源中包含值和label属性的对象数组来完成。您需要使用select和focus选项来支持此功能。 http://jqueryui.com/demos/autocomplete/#custom-data

强制用户选择有效选项可以通过几种方式完成。如果用户输入无效选项然后离开框，我喜欢消隐输入框的想法。您可以使用“更改”选项执行此操作。这也是詹姆斯的代码所做的。

以下是两个功能的工作示例： http://jsfiddle.net/vZeHr/4/

需要选定值的jquery自动完成字段？

3 个答案: