jquery AJAX Autocomplete无法追加

时间:2013-11-08 12:24:30

标签: jquery jquery-autocomplete

我有简单的jquery自动完成功能,可以从服务中获取Json结果,我希望显示返回的结果,但是没有任何反应。真的不知道怎么解决这个问题虽然看起来很简单

 <body>

<label for="txtSearch">Select a programming language: </label>
<input id="txtSearch"/>
 <div id="results"></div>

<script>
    $(document).ready(function(){
        $("#txtSearch").autocomplete({
            source: rez,
            appendTo: "#results"
        });
    });

    var rez = function search2() {
        if ($("#txtSearch").val().length > 2) {
            $.ajax({
                type: "post",
                url: "Search.aspx/GetCity",
                data: "{'cityName':'" + $("#txtSearch").val() + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (result) {
                    var obj = $.parseJSON(result.d);
                    return obj;
                }
            });
        }
    };
</script>

2 个答案:

答案 0 :(得分:0)

jQuery为您处理JSON解析。如果您的dataType是“json”,则无需将其作为字符串发送或解析结果。

您遇到的具体问题是您的rez函数没有传递所需的参数,requestresponserequest是具有与搜索项有关的属性的对象,例如。 request.termresponse是一个回调函数,您需要在$.ajax成功函数内调用以将数据传回自动完成。

您仍然需要解析从服务器返回的数据,因为自动完成需要一个简单的值数组或一个包含键labelvalue的对象数组,例如:

[
    { label: 'London, England', value: 'LDN' },
    { label: 'Liverpool England', value: 'LPL' }
]

使用console.log()查看您获得的值,并使其符合您的期望/需要。

文档中有一个示例,您可以在此处http://jqueryui.com/autocomplete/#remote-jsonp

试试这个:

$(document).ready(function(){
    $("#txtSearch").autocomplete({
        source: rez,
        appendTo: "#results",
        minLength: 2 // this will check the input is at least 2
    });
});

// request is the search request object,
// response is the callback to pass data back to autocomplete
var rez = function search2( request, response ) {
    $.ajax({
        type: "post",
        url: "Search.aspx/GetCity",
        data: { cityName: request.term },
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (result) {
            // results have to be returned via the response callback as 
            // label/value pairs or just an array of values
            response( $.map( result, function( item ) {
                return {
                    label: [ item.CityName, item.Country, item.Region].join( ', ' ),
                    value: item.ID
                };
            } ) );
        }
    });
};

答案 1 :(得分:0)

尝试这样的事情

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

参考

http://jqueryui.com/autocomplete/#remote-jsonp