3

私は多くの検索を行い、以下にリストされている私の場合と同様の多くの結果を得ました。

データソースは、次のような形式のテキストファイルからのものです。

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 

オートコンプリートフィールドのソースとして含めようとしているデータは、各行の1番目と2番目(郵便番号と郊外)のフィールドです。しかし、郵便番号と郊外は州でフィルタリングされます。たとえば、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"

データは次のように表示されます。 ここに画像の説明を入力してください

私は自分のコードに間違ったことをしたことを知っていますが、それを理解することはできません。

4

1 に答える 1

1

私はあなたが次のようなものを使用する必要があると思います

$(function(){

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>'}, {...}, {...}, ...]

テクニカルデモ:フィドル(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};
});

クエリパラメータをサポートする別のサンプル

于 2013-02-22T03:08:43.350 に答える