如何写 jquery 输入自动完成

Question

我正在尝试为输入标签编写自动完成，自动完成数组来自 ajax 调用的结果。我已经尝试了很多次，但它仍然没有获取输入搜索的数据。我正在使用 Jquery 1.11.3 version.please 求助！！

Answer 1

使用此 jquery 库进行动态自动完成 https://jqueryui.com/autocomplete/

Answer 2

您需要在收到 AJAX 调用的响应后绑定 jquery 自动完成。这并不简单。您需要使用自动完成 API（例如 select）、source 和 focus 事件来使其工作。下面是将来自 ajax 响应的用户列表绑定到自动完成输入框的图示。

在 select 函数中，您需要搜索所有用户名称为属性的输入值，并仅过滤那些记录。这段代码只不过是根据 name 属性.

从用户数组列表中搜索用户

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery UI Fetch Users</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="/resources/demos/style.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
    <script>
        $(function () {
            fetchUsers();
        });

        function fetchUsers() {
            $.ajax({
                url: 'https://jsonplaceholder.typicode.com/users/',
                type: 'GET',

                contentType: "application/json; charset=utf-8",

                success: function (data) {
                    console.log(data);
                    if (data) {
                        $("#users").autocomplete({
                            source: function (request, response) {
                                response($.map(data, function (obj, key) {
                                    var name = obj.name.toUpperCase();

                                    if (name.indexOf(request.term.toUpperCase()) != -1) {
                                        return {
                                            label: obj.name,
                                            value: obj.id
                                        }
                                    } else {
                                        return null;
                                    }
                                }));

                            },
                            focus: function (event, ui) {
                                event.preventDefault();
                            },
                           
                            select: function (event, ui) {
                                event.preventDefault();
                                $('#users').val(ui.item.label);
                            }
                        });
                    }
                },

                error: function (error) {
                    console.log(error);
                }
            });
        }
    </script>
</head>

<body>

    <div class="ui-widget">
        <label for="tags">Users: </label>
        <input id="users">
    </div>


</body>

</html>

有关自动完成的更多详细信息 API 请参阅 jQuery UI documentation。

如何写 jquery 输入自动完成

How to write jquery input autocomplete

jquery

jquery-ui-autocomplete