使用 ajax 的 jQuery UI 自动完成，其源是使用 foreach 从文本文件生成的

Question

我做了很多搜索，得到了很多与我的情况类似的结果，如下所示:

• Jquery UI autocomplete ajax is not populating dropdown box
• jQuery UI GET autocomplete source with ajax request
• JQuery UI autocomplete with json and ajax

数据源来自文本文件，格式如下:

postcode,suburb,state,lat,lon
200,AUSTRALIAN NATIONAL UNIVERSITY,ACT,-35.277272,149.117136
221,BARTON,ACT,-35.201372,149.095065
800,DARWIN,NT,-12.801028,130.955789
801,DARWIN,NT,-12.801028,130.955789
804,PARAP,NT,-12.432181,130.84331
810,ALAWA,NT,-12.378451,130.877014
810,BRINKIN,NT,-12.367769,130.869808
810,CASUARINA,NT,-12.376597,130.850489
810,JINGILI,NT,-12.385761,130.873726
810,LEE POINT,NT,-12.360865,130.891349 

我试图包含作为自动完成字段源的数据是每行的第一个和第二个(邮政编码和郊区)字段。但邮政编码和郊区过滤器具有状态。例如，ACT 是事件状态，所有邮政编码和郊区都是自动完成的来源。我使用 array_unique() 删除重复的数据。

//take area from state
function take_area(){
    global $wpdb;
    $uploads = wp_upload_dir();
    $upload = $uploads[baseurl];
    $file = $upload.'/csv/suburb_and_area.txt';
    $f = fopen($file, 'r');
    $state = $_POST['state'];
    $counter = 0;
    while($line = fgets($f, 4096)){
        $details = explode(',', $line); 
        $counter++;
        if(trim($details[2]) == $state){
            $state_arr[$counter] = $details[1];
        }
    }
    $option = '';
    if($state!=''){
        $c=0;
        $area_of_state = array_unique($state_arr);
        foreach($area_of_state as $area){
            if($c>0){$option .= ', ';}
            $option .= '"'.$area.'"';
            $c++;
        }
    }
    echo $option;
}

和 JavaScript:

    $("#state").change(function(){
    var state = $('#state :selected').attr('data-value');
    if(!state){
        state = $('#state').val();
    }
    $.ajax({
        url:"<?php bloginfo('wpurl'); ?>/wp-admin/admin-ajax.php", 
        type:'POST',
        data:'action=take_area_from_state&state=' + state,
        success:function(results){
            if(results!=0){
                $("#area").removeAttr("disabled"); 
                $("#area").empty();
                var source = [results];
                $("#area").autocomplete({source: source});
            }else{
                $("#area").attr("disabled", "disabled"); 
            }
        }
    });

});

以及响应

"AUSTRALIAN NATIONAL UNIVERSITY", "BARTON", "HMAS CRESWELL", "JERVIS BAY", "CANBERRA", "DEAKIN", "DEAKIN WEST", "DUNTROON", "HARMAN", "HMAS HARMAN", "PARKES", "PARLIAMENT HOUSE", "RUSSELL", "YARRALUMLA", "ACTON", "BLACK MOUNTAIN", "AINSLIE", "DICKSON", "DOWNER", "HACKETT", "LYNEHAM", "O'CONNOR", "WATSON", "FORREST", "GRIFFITH", "MANUKA", "RED HILL", "CAUSEWAY", "KINGSTON", "NARRABUNDAH", "CURTIN", "GARRAN", "HUGHES", "CHIFLEY", "LYONS", "O'MALLEY", "PHILLIP", "SWINGER HILL", "WODEN", "FARRER", "ISAACS", "MAWSON", "PEARCE", "TORRENS", "CIVIC SQUARE", "CANBERRA INTERNATIONAL AIRPORT", "FYSHWICK", "MAJURA", "PIALLIGO", "SYMONSTON", "CHAPMAN", "DUFFY", "FISHER", "HOLDER", "MOUNT STROMLO", "PIERCES CREEK", "RIVETT", "STIRLING", "URIARRA", "URIARRA FOREST", "WARAMANGA", "WESTON", "WESTON CREEK", "BRADDON", "CAMPBELL", "REID", "TURNER", "ARANDA", "COOK", "HAWKER", "JAMISON CENTRE", "MACQUARIE", "PAGE", "SCULLIN", "WEETANGERA", "CHARNWOOD", "DUNLOP", "FLOREY", "FLYNN", "FRASER", "HIGGINS", "HOLT", "KIPPAX", "LATHAM", "MACGREGOR", "MELBA", "SPENCE", "BELCONNEN", "BRUCE", "EVATT", "GIRALANG", "KALEEN", "LAWSON", "MCKELLAR", "UNIVERSITY OF CANBERRA", "HALL", "HUME", "KOWEN FOREST", "OAKS ESTATE", "THARWA", "TOP NAAS", "GREENWAY", "TUGGERANONG", "KAMBAH", "ERINDALE CENTRE", "OXLEY", "WANNIASSA", "FADDEN", "GOWRIE", "MACARTHUR", "MONASH", "BONYTHON", "CALWELL", "CHISHOLM", "GILMORE", "ISABELLA PLAINS", "RICHARDSON", "THEODORE", "BANKS", "CONDER", "GORDON", "CRACE", "MITCHELL", "GUNGAHLIN", "FRANKLIN", "GINNINDERRA VILLAGE", "NGUNNAWAL", "NICHOLLS", "PALMERSTON", "AMAROO", "BONNER", "FORDE", "HARRISON"

数据显示如下:

我知道我的代码做错了，但我无法弄清楚。

Answer 1

我认为你需要使用类似的东西

$(函数(){

var src = [];

$('#area').autocomplete({
    minLength: 0,
    source: function( request, response ) {
        response(src)
    }
});

$("#state").change(function(){
    var state = $('#state :selected').attr('data-value');
    if(!state){
        state = $('#state').val();
    }
    $.ajax({
        url:"<?php bloginfo('wpurl'); ?>/wp-admin/admin-ajax.php", 
        type:'POST',
        data:'action=take_area_from_state&state=' + state,
        success:function(results){
            if(results!=0){
                $("#area").removeAttr("disabled"); 
                src = $.map(results.split(','), function(v, i){ <----- Convert the string result into an array of objects
                    return {
                        label: v,
                        varlue: v
                    };
                });
            }else{
                $("#area").attr("disabled", "disabled"); 
            }
        }
    });

});

});

我再次不确定您来自服务器的响应数据。 result success 中的对象回调应该是对象数组，例如 [{label: '<text-to-appear-in-the-dropdown>', value: '<value>'}, {...}, {...}, ...]

技术演示:Fiddle (它不使用基于ajax的源)

如果您的 ajax 查询返回一个数组，那么您可以创建 src 数组，如下所示。

var result = ["AUSTRALIAN NATIONAL UNIVERSITY", "BARTON", "HMAS CRESWELL", "JERVIS BAY", "CANBERRA", "DEAKIN", "DEAKIN WEST", "DUNTROON", "HARMAN", "HMAS HARMAN", "PARKES", "PARLIAMENT HOUSE", "RUSSELL", "YARRALUMLA", "ACTON", "BLACK MOUNTAIN", "AINSLIE", "DICKSON", "DOWNER", "HACKETT", "LYNEHAM", "O'CONNOR", "WATSON", "FORREST", "GRIFFITH", "MANUKA", "RED HILL", "CAUSEWAY", "KINGSTON", "NARRABUNDAH", "CURTIN", "GARRAN", "HUGHES", "CHIFLEY", "LYONS", "O'MALLEY", "PHILLIP", "SWINGER HILL", "WODEN", "FARRER", "ISAACS", "MAWSON", "PEARCE", "TORRENS", "CIVIC SQUARE", "CANBERRA INTERNATIONAL AIRPORT", "FYSHWICK", "MAJURA", "PIALLIGO", "SYMONSTON", "CHAPMAN", "DUFFY", "FISHER", "HOLDER", "MOUNT STROMLO", "PIERCES CREEK", "RIVETT", "STIRLING", "URIARRA", "URIARRA FOREST", "WARAMANGA", "WESTON", "WESTON CREEK", "BRADDON", "CAMPBELL", "REID", "TURNER", "ARANDA", "COOK", "HAWKER", "JAMISON CENTRE", "MACQUARIE", "PAGE", "SCULLIN", "WEETANGERA", "CHARNWOOD", "DUNLOP", "FLOREY", "FLYNN", "FRASER", "HIGGINS", "HOLT", "KIPPAX", "LATHAM", "MACGREGOR", "MELBA", "SPENCE", "BELCONNEN", "BRUCE", "EVATT", "GIRALANG", "KALEEN", "LAWSON", "MCKELLAR", "UNIVERSITY OF CANBERRA", "HALL", "HUME", "KOWEN FOREST", "OAKS ESTATE", "THARWA", "TOP NAAS", "GREENWAY", "TUGGERANONG", "KAMBAH", "ERINDALE CENTRE", "OXLEY", "WANNIASSA", "FADDEN", "GOWRIE", "MACARTHUR", "MONASH", "BONYTHON", "CALWELL", "CHISHOLM", "GILMORE", "ISABELLA PLAINS", "RICHARDSON", "THEODORE", "BANKS", "CONDER", "GORDON", "CRACE", "MITCHELL", "GUNGAHLIN", "FRANKLIN", "GINNINDERRA VILLAGE", "NGUNNAWAL", "NICHOLLS", "PALMERSTON", "AMAROO", "BONNER", "FORDE", "HARRISON"]

src = $.map(result, function(val){
    return {label: val, value: val};
});

Another sample具有查询参数支持