在jeasyui组合框中显示数据

i have a combobox field with jeasyui, i want to validate the data.. but the data wont appear on list..

here is the screenshot :

http://s.kaskus.id/images/2015/04/08/2192642_20150408103727.jpg

but, when i type a word on it to filter the list, it work! for example there are New York, and New Jersey.. i typed it down, the list filtered

here is the screenshot again :

http://s.kaskus.id/images/2015/04/08/2192642_20150408104053.jpg

and here is the code.. i get this code from internet but the example is using json for data, meanwhile i use link to another file for data.

function cmdArea($name,$caption)
{
?>  
<tr>    
<td><?php getCaption($caption);?> :</td>
<td>
    <input class="easyui-combobox" 
        id="<?php echo $name;?>"
        name="<?php echo $name;?>"
        data-options="

            method:'post',
            mode:'remote',
            valueField:'id',
            textField:'area_name',
            panelHeight:'auto',panelHeight:100,width:150, forceSelection:true"
            disabled=true>
    </input>
<script>
$.extend($.fn.validatebox.defaults.rules,{
exists:{
    validator:function(value,param){
        var cc = $(param[0]);
        var v = cc.combobox('getValue');
        var rows = cc.combobox('getData');
        for(var i=0; i<rows.length; i++){
            if (rows[i].id == v){return true}
        }
        return false;
    },
    message:'The entered value does not exists.'
  }
});

$(function () {
 $('#harea').combobox({
    url: 'services/runCRUD.php?func=datasource&lookup=mst/area&pk=<?php echo "area_code"; ?>&sk=<?php echo "area_name"; ?>&order=area_name', // <-- here is my data, the example was a json data then i tried to change with mine but not working
    panelHeight: 'auto',
    selectOnNavigation: false,
    valueField: 'id',
    textField: 'text',
    editable: true,
    required: true,    
    validType: 'exists["#harea"]',
    onLoadSuccess: function () { },
    filter: function (q, row) {
    return row.text.toLowerCase().indexOf(q.toLowerCase()) == 0;
    },

});

$('#harea').combobox('setValue','1');

$('#harea').combobox('validate')
alert($('#harea').combobox('isValid'));
});
</script>
</td>
</tr>
<?php
}
?>

can somebody help me.. and thanks before.

Btw why are you looking for difficult way?

just see the jeasyui combobox manual

example :

HTML

    <input id="cc1" class="easyui-combobox" data-options="
            valueField: 'id',
            textField: 'text',
            url: 'get_data1.php',
            onSelect: function(rec){
                var url = 'get_data2.php?id='+rec.id;
                $('#cc2').combobox('reload', url);
            }">
    <input id="cc2" class="easyui-combobox" data-options="valueField:'id',textField:'text'">

PHP get_data2.php

<?php
$data="    [{
        "id":1,
        "text":"text1"
    },{
        "id":2,
        "text":"text2"
    },{
        "id":3,
        "text":"text3",
        "selected":true
    },{
        "id":4,
        "text":"text4"
    },{
        "id":5,
        "text":"text5"
    }]";
echo $data; 
?>

</div>