jquery ui autocomplete with ajax wich source是使用foreach从文本文件生成的

时间：2013-02-21 11:13:20

标签： jquery-ui jquery foreach jquery-autocomplete

在我做了很多搜索之后，我在这里发了很多类似于我的案例的帖子，如下所示：
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;
}

和javacript：

    $("#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"

数据显示如下： enter image description here

我知道我的代码做错了但我无法理解。我搜索解决方案超过一天。我认为这是我最后的资源。

1 个答案:

答案 0 :(得分：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

相关问题
最新问题