1

我在表单中使用 jQuery UI 自动完成作为助手。当我尝试使用它从可用 IP 列表中搜索时，它从不过滤结果，无论我输入多少个字符（数字），它总是返回完整列表。我该如何纠正？我正在使用此代码http://jqueryui.com/autocomplete/#remote-with-cache 从 PHP 文件生成的 JSON 与此类似（我减少了结果的数量）：

["192.168.3.2","192.168.3.3","192.168.3.4","192.168.3.5","192.168.3.6","192.168.3.7","192.168.3.8","192.168.3.9"," 192.168.3.10"]

[编辑]

表单页面代码：

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>jQuery UI Autocomplete - Remote with caching</title>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
        <link rel="stylesheet" href="/resources/demos/style.css" />
        <style>
            .ui-autocomplete-loading {
                background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat;
            }
        </style>
        <script>
            $(function() {
                var cache = {};
                $("#birds").autocomplete({
                    minLength: 2,
                    source: function(request, response) {
                        var term = request.term;
                        if (term in cache) {
                            response(cache[ term ]);
                            return;
                        }
                        $.getJSON("tab-ip-autocomplete.php", request, function(data, status, xhr) {
                            cache[ term ] = data;
                            response(data);
                        });
                    }
                });
            });
        </script>
    </head>
    <body>
        <div class="ui-widget">
            <label for="birds">Birds: </label>
            <input id="birds" />
        </div>
    </body>
</html>

PHP 转 JSON 代码：

<?php
include_once 'conn.php';

INET_NTOA(ipv4) LIKE :ipv4";

$autocomplete = "SELECT * FROM vteste;";

$STH = $DBH->prepare($autocomplete);
$STH->bindParam(':ipv4', $ipv4, PDO::PARAM_STR);
$STH->execute();
$STH->setFetchMode(PDO::FETCH_ASSOC);
$row = $STH->fetch();


/* gera json */

$arr = array();

while ($row = $STH->fetch()):
    $arr[] = $row['ipv4'];
endwhile;

$json = json_encode($arr);
echo $json;
?>
4

1 回答 1

1

使用远程数据源时，jQueryUI AutoComplete 不会过滤您的结果 - 它取决于提供数据以仅发送匹配结果的脚本。

从http://api.jqueryui.com/autocomplete/#option-source：

自动完成插件不过滤结果，而是添加了一个带有术语字段的查询字符串，服务器端脚本应该使用它来过滤结果。例如，如果源选项设置为“ http://example.com ”并且用户键入 foo，则会向http://example.com?term=foo发出 GET 请求。数据本身可以采用与上述本地数据相同的格式。

于 2013-05-04T20:26:20.923 回答