根据表单（input）值变化不刷新从服务器端读取数据显示下拉列表

最新推荐文章于 2023-09-07 15:58:28 发布

八九燕来

最新推荐文章于 2023-09-07 15:58:28 发布

阅读量633

点赞数

分类专栏： JavaScript yii2 php ajax

本文链接：https://blog.csdn.net/carrousel0516/article/details/79946560

版权

yii2 同时被 3 个专栏收录

24 篇文章 0 订阅

订阅专栏

php

22 篇文章 0 订阅

订阅专栏

JavaScript

13 篇文章 0 订阅

订阅专栏

View的代码

<div id="community-ajax"></div>
    <?php $form = ActiveForm::begin(); ?>

    <?= $form->field($model, 'community')->textInput() ?>
    <div class="form-group">
        <label class="control-label">&nbsp;</label>
        <?= Html::submitButton($model->isNewRecord ? '添加' : 'Update', ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary']) ?>
    </div>

    <?php ActiveForm::end(); ?>

<script>
    $(document).ready(function(){
        $("#second-community").on('input propertychange', function(){
            $("#community-ajax").load('?r=test/ajax&str=' + $("#second-community").val(), function(){
                        $("p.hitp").click(function(){
                            $("#second-community").val($(this).text());
                            $("#community-ajax").css("display", "none");
                        });
            });
            $("#community-ajax").css("display", "block");
        });
    })
</script>
<style>
    #community-ajax{
        position:absolute;
        border:1px solid #ccc;
        background:white;
        left:365px;
        top:169px;
        width:300px;        
        display:none;
    }
    #community-ajax p{
        line-height:32px;
    }
    #community-ajax p:hover{
        background:#eee;
    }
</style>

Controller的代码

    public function actionAjax($str){
        $result = "";
        $communities = BaseCommunity::find()->where("name like '%" . $str . "%'")->limit(10)->all();
        foreach($communities as $c){
            $result .= '<p class="hitp">' . $c->name . '</p>';          
        }
        //echo $result;
        return $result;
    }