jquery autocomplete json

时间:2013-02-22 18:13:02

标签: jquery json

我正在尝试在表单上输入自动填充功能,但是在显示数据时遇到问题。这里有很多帖子,但也有很多不同的方式。我一直在尝试按照jquery网站上的例子,但我想我只是没有得到正确的返回数据?我的页面看起来像:

<html>
<head>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" type="text/css" media="all" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>

<script type="text/javascript">                                         
$(document).ready(function() {
    $( "#Codes" ).autocomplete({
        source: function( request, response ) {
            $.ajax({                   
                   url: "/jreqlib",
                   dataType: "json",
                   data: {
                       featureClass: "P",
                       style: "full",
                       maxRows: 25,
                    },
                    success: function( data ) {
                        response( $.map( data, function( item ) {
                            return {
                                label: item.name,
                                value: item.name
                            }
                        }));
                    }
                });
        },
        minLength: 1,
        open: function() {
        $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
        },
        close: function() {
            $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
        }
   });
});
    </script>
</head>
<body>
<form>
    <input id="Codes">
</form>
</body>
</html>

我从服务器返回的内容如下所示:

[{"1234":"1234"},{"134":"134},{"567":"567"}]

我喜欢的是当我在框中点击时,它显示“1234”和“567”,如果我输入1,那么“1234”和“134”将出现,如果我输入12然后只是“1234” “会出现等等。

任何帮助将不胜感激 TIA

1 个答案:

答案 0 :(得分:0)

我的建议是让服务器根据搜索字符串动态生成json。在name_startsWith: request.term下方插入maxRows: 25,。服务器现在可以在name_startsWith get-variable中找到搜索字符串。对于搜索字符串“1”,服务器可能会使用["1234","134"]进行响应。

此外,删除

featureClass: "P",
style: "full",
maxRows: 25,

并替换

response( $.map( data, function( item ) {
    return {
        label: item.name,
        value: item.name
    }
}));

通过

response(data);