jQuery UI自动完成显示配置

时间:2014-03-25 03:00:16

标签: jquery jquery-ui jquery-ui-autocomplete

我是JQuery UI Autocomplete的新手,有什么办法可以配置输入,所以当人们输入标签时,会显示相应的值供选择吗?到目前为止,我只能让人们使用{label:" label1",value:" value1" ...}。

我希望有一个输入接受标签并弹出适当的值以供选择。

谢谢

1 个答案:

答案 0 :(得分:0)

我发现这个问题的解决方案是代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery.js"></script>
    <link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.10.4.custom.css"/>
    <script src="js/jquery-ui-1.10.4.custom.js"></script>
</head>
<body>
    <script>
        $(function(){
            var labels = ["CG", "AI", "CV", "RMI", "JE", "JI", "JA"];
            var values = ["Computer Graphics", "Artificial Intelligence", "Computer Vision",
            "Remote Method Invocation", "Java - Elementary", "Java - Intermediate",
            "Java - Advanced"]

        $(".tags").autocomplete({
            source : function(req, response){
                var reg = $.ui.autocomplete.escapeRegex(req.term);
                var matcher = new RegExp("^"+reg, "i");
                var d = [];
                var a = $.grep(labels, function(item, index){
                var found = matcher.test(item);
                    if(found){
                        d.push(values[index]);
                    }
                    return found;
                });
                response(d);
            }
        });
    });
    </script>
<input type="text" class="tags"/>
</body>
</html>