如何编写jQuery输入自动完成

问题描述

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

解决方法

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

一旦收到AJAX调用的响应，就需要绑定jquery自动完成功能。这并不简单。您需要使用诸如 select，source和focus 事件之类的自动完成API才能使其正常工作。下面是将用户列表从ajax响应绑定到自动完成输入框的说明。

在 select 函数中，您需要使用所有用户的name属性搜索输入值并仅过滤那些记录。此代码片段不过是根据 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-ui-autocomplete

如何编写jQuery输入自动完成

问题描述

解决方法

相关问答