我遇到以下情况:
包含邮政编码字段和城市字段的表单。
我想在邮政编码字段上自动填充,因此当用户输入1000例时,自动填充值将显示“1000 - Brussels”。选择此值后,将在邮政编码字段中填写1000,并在“城市”字段中填写布鲁塞尔。
邮政编码,城市和连接信息将来自mysql数据库:
我的自动完成功能仅使用邮政编码,但不知道如何实现所描述的效果(=填充第二个字段)。
当前表单代码:
<div class="row">
<?php echo $form->labelEx($model,'PostalCode'); ?>
<?php //echo $form->textField($model,'PostalCode',array('size'=>10,'maxlength'=>50));
$this->widget('zii.widgets.jui.CJuiAutoComplete', array(
'name'=>'PostalCode',
'value'=>$model->PostalCode,
//'source'=>$people, // <- use this for pre-set array of values
'source'=>$this->createUrl('BeCity/GetBelgianPostalCodes'),// <- path to controller which returns dynamic data
// additional javascript options for the autocomplete plugin
'options'=>array(
'minLength'=>'1', // min chars to start search
'showAnim'=>'fold'
),
));
?>
<?php echo $form->error($model,'PostalCode'); ?>
</div>
当前控制器操作代码:
public function actionGetBelgianPostalCodes()
{
$res =array();
if (isset($_GET['term'])) {
// http://www.yiiframework.com/doc/guide/database.dao
$qtxt ="SELECT
DISTINCT
bc.PostalCode as PostalCode,
bc.NameNL as CityName,
CONCAT(bc.PostalCode, ' - ', bc.NameNL) as FullCityName
FROM be_city bc
WHERE bc.PostalCode LIKE :qterm
ORDER BY bc.PostalCode, bc.NameNL ASC";
$command =Yii::app()->db->createCommand($qtxt);
$command->bindValue(":qterm", $_GET['term'].'%', PDO::PARAM_STR);
$res =$command->queryColumn();
}
echo CJSON::encode($res);
Yii::app()->end();
}
不确定控制器操作是否完全正确,$ command-&gt; queryAll()似乎不起作用所以我使用queryColumn()代替但只返回第一列?
任何提示?
另外,另外一个问题,我希望控制器动作的链接是动态的。如果在之前的国家/地区下拉列表中用户选择了比利时,则应该调用“BeCity / GetBelgianPostalCodes”。如果是法国,应该是'FrCity / GetFrenchPostalCodes'。这有可能,怎么样?
感谢
答案 0 :(得分:3)
这里我发现的方式(我调整你的应用程序,所以我希望没有错字...)我也将小部件的名称更改为myPostCode最好可能保留Yii给出的默认名称:
<?php
$this->widget('zii.widgets.jui.CJuiAutoComplete', array(
'name'=>'myPostCode',
'value'=>$model->PostalCode,
'source'=>$this->createUrl('BeCity/GetBelgianPostalCodes'),
'options'=>array(
'minLength'=>'1', // min chars to start search
'showAnim'=>'fold'
//focus option will tell what is displayed in field during the selection
'focus'=> 'js:function( event, ui ) {
$( "#myPostCode" ).val( ui.item.postalcode );
return false;
}',
//select function will tell where go each field
'select'=>'js:function( event, ui ) {
$( "#myPostCode" ).val( ui.item.postalcode );
$( "#CityName" ).val(ui.item.cityname);
return false;
}'
),
));
//Here is the code for the display.
//This code MUST be AFTER the widget
//It should be possible to include it in the widget but I do not know how.
// You may change the line "<a>"+item.postalcode... with what you want to display but must keep the a tag."
Yii::app()->clientScript->registerScript('input', '
$("#myPostCode").data("autocomplete")._renderItem = function( ul, item ) {
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( "<a>"+item.postalcode + " - " + item.cityname+"</a>")
.appendTo( ul );
};');
?>
您还需要更改查询以返回所有数据
$res =$command->queryAll();
答案 1 :(得分:2)
设置Ajax选择选项,如下所示:
$this->widget('zii.widgets.jui.CJuiAutoComplete', array(
'name'=>'PostalCode',
'source'=>$this->createUrl('/site/getpostalcode'),
// additional options for the autocomplete plugin
'options'=>array(
'minLength'=>'4',
'select'=>"js:function(event, ui) {
$('#PostalCode').val(ui.item.postalcode);
$('#CityName').val(ui.item.cityname);
}",
),
'htmlOptions'=>array(
'style'=>'width: 200px;',
'placeholder' => 'Postal Code'
),
));