autocomplete自動補全,遠程json數據

使用前須要引入jquery的相關js,csscss

js:html

$(function () {
            $("#orderNo").autocomplete({
                source: function (query, process) {
                    return $.ajax({
                        url: "/lawyer/businessInfo/search",
                        type: 'post',
                        data: {"orderNo": $( "#orderNo" ).val()},
                        success: function (result) {
                            var resultList = result.rows.map(function (item) {
                                return {
                                    id:item.id,
                                    name:item.businessLabel
                                };
                            });
                            return process(resultList);
                        },
                    });
                },
                select: function( event, ui ) {
                    $( "#orderNo" ).val(ui.item.name);
                    $( "#orderId" ).val(ui.item.id);
                    return false;
                }
			}).data( "ui-autocomplete" )._renderItem = function( ul, item ) {
                    return $( "<li>" )
                        .append( "<a>" + item.name + "</a>" )
                        .appendTo( ul );
			};
        });

遠程json數據格式:jquery

{
	"total": 2,
	"rows": [{
		"id": 1,
		"businessLabel": "婚姻糾紛",
	}, {
		"id": 2,
		"businessLabel": "遺產爭奪",
	}],
	"code": 0
}
相關文章
相關標籤/搜索