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

原创 2018年04月15日 09:09:14

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;
    }
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/carrousel0516/article/details/79946560

PHP连接数据库&通过下拉列表及具体条件查询数据

  • Sunmh_AC
  • Sunmh_AC
  • 2016-10-09 19:35:26
  • 2369

网站兼容——火狐浏览器刷新没有清空表单

在进行项目开发中,发现一些筛选条件,上一次选中后,刷新页面仍然存在。页面上的数据仍然是上一次表单中的数据,其实是很火狐浏览器的兼容性造成的。      解决办法:       经搜索发现,这个...
  • zhangzijiejiayou
  • zhangzijiejiayou
  • 2016-05-31 21:18:40
  • 1489

jQuery实现当select下拉框内容变化时,input输入框内容随之变化

今天实现了一个功能,当select下拉框中的内容发生变化时,input输入框中的内容随之发生变化,具体实现方法如下://绑定change事件,当下拉框内容发生变化时启动事件 $("#wlms").bi...
  • cat_pp
  • cat_pp
  • 2016-11-29 13:12:22
  • 4860

js实现在编辑框input下根据输入内容显示匹配内容的下拉列表(一)

实现一个在编辑框input下根据输入内容显示匹配内容的下拉列表。 实现思路很简单: 将匹配的内容放在一个div中,input输入时把匹配内容的div显示在input下面。 在做的过程中遇到一个棘手的问...
  • xxm524
  • xxm524
  • 2016-01-27 21:51:34
  • 5759

下拉菜单从数据库读取数据动态生成

一、页面index.ftl
  • qq_33543227
  • qq_33543227
  • 2017-11-22 11:10:17
  • 770

根据select标签中option选项的变化动态更改表单元素

今天做项目时,有一个功能点,需要根据select标签中option选项的变化动态来决定表单中某一行...
  • wanghaoxyq
  • wanghaoxyq
  • 2014-09-01 22:08:09
  • 4550

HTML小技巧:页面刷新后表单中值不丢失[经典]

代码示例: saveHistory行为应用 用了saveHistory 行为的表单项: 一般表单项:  注意: 这行代码为必需。特别说明saveHistory 默认行为允许对象在浏览...
  • jiedushi
  • jiedushi
  • 2008-06-12 14:21:00
  • 7198

JS实现下拉列表中的联动(根据所选的text的值,改变另外一个下拉列表中国的值(text))

实现两个下拉列表中的联动问题,根据第一个下拉列表中的值改变另外一个下拉列表中的值,选择的是text的值,改变的也是text的值,如下面的下拉列表,根据国籍选择相应的证件类型(若非中国国籍,默认选择护照...
  • u010078133
  • u010078133
  • 2015-01-19 16:21:32
  • 1768

提交表单时,固定jsp页面<select>标签下option的值不刷新

主要内容:SSH解决从a.jsp页面中的select标签中选中一个值param,同时将param提交到Action,再将结果传回a.jsp同时保持之前选中 的param仍为选中状态。 a.jsp页...
  • cherry5230
  • cherry5230
  • 2016-01-19 13:45:28
  • 1930

解决文本框刷新后之前输入的值还存在,没有清空的问题

有过表单设计经验的朋友肯定知道,当我们在浏览器中输入表单信息的时候,往往input文本输入框会记录下之前提交表单的信息,以后每次只要双击 input文本输入框就会出现之前输入的文本,这样有时会觉得比较...
  • sanyuesan0000
  • sanyuesan0000
  • 2014-09-25 13:37:42
  • 9824
收藏助手
不良信息举报
您举报文章:根据表单(input)值变化不刷新从服务器端读取数据显示下拉列表
举报原因:
原因补充:

(最多只允许输入30个字)