jQuery AJAX HTML5数据列表自动完成示例

此代码使用H TML5数据列表标记为文本字段设置自动完成选项 。 它使用AJAC请求从JSON文件中获取数据（如果需要，数据可以永久存储在浏览器中，也可以在js对象上本地存储）。 然后，它使用郊区的选择来自动填充其他字段的邮政编码，并在郊区发生变化时进行说明。 除了Safari以外，几乎所有浏览器都像对待工具一样工作。

注意： HTML数据列表仍然不能与所有浏览器兼容。 请参阅兼容性 。 对于回填插件，请使用以下代码： jQuery.relevantdropdowns.js –插入带有LI的UL标签以替换数据列表选项。

HTML5数据列表标签

完整的jQuery

此代码通过JSON填充数据列表，并根据用户对字段的自动完成选择自动填充其他字段。

window.DATALIST = {

    cache: {},

    init: function()
    {
        var _this = this,
            this.cache.$form = $('formid');
            this.cache.$suburbs = this.cache.$form.find('datalist#suburbs');
            this.cache.$suburbInput = this.cache.$form.find('input[name="suburb"]');
            this.cache.$postcodeInput = this.cache.$form.find('input[name="postcode"]');
            this.cache.$stateInput = this.cache.$form.find('input[name="state"]');

        //grab the datalist options from JSON data
        var checkMembershipRequest = $.ajax({
            type: "GET",
            dataType: "JSON",
            url: "/php/suburbs.php"
        });

        checkMembershipRequest.done(function(data)
        {
            console.log(data);

            //data could be cached in the browser if required for speed.
            // localStorage.postcodeData = JSON.stringify(data);

            //add options to datalist
            $.each(data.suburbs, function(i,v)
            {
                _this.cache.$suburbs.append(''+i+'
');
            });

            //hook up data handler when suburb is changed to autocomplete postcode and state
            _this.cache.$suburbInput.on('change', function()
            {
                // console.log('suburb changed');
                var val = $(this).val(),
                    selected = _this.cache.$suburbs.find('option[data-value="'+val+'"]'),
                    postcode = selected.data('postcode'),
                    state = selected.data('state');
                _this.cache.$postcodeInput.val(postcode);
                _this.cache.$stateInput.val(state);
            });

        });

        checkMembershipRequest.fail(function(jqXHR, textStatus)
        {
            console.log( "postcode request fail - an error occurred: (" + textStatus + ")." );
            //try again...
        });

    }

}

完整的HTML

这是您的HTML外观：

• *Suburb:
• *Postcode: State:

完整的JSON

PHP文件返回JSON –可以是.json或.php，并根据需要从数据库中获取数据。

{
    "suburbs": {
        "suburb1": {
            "postcode": "2016",
            "state": "NSW"
        },
        "suburb2": {
            "postcode": "4016",
            "state": "QLD"
        },
        "suburb3": {
            "postcode": "3016",
            "state": "CA"
        },
        "suburb4": {
            "postcode": "8016",
            "state": "WA"
        },
        "suburb5": {
            "postcode": "6016",
            "state": "SA"
        }
    }
}

html5触发资料清单

使用ALT +向下箭头可模拟用户操作。 您将需要使用jQuery模拟多次触发按键。

键码ALT = 18（也称为altKey的修饰键）
键码向下箭头= 40

var e = jQuery.Event("keydown");
e.which = 40;
e.altKey = true;
$("input").trigger(e);

From: https://www.sitepoint.com/jquery-ajax-html5-datalist-autocomplete/