jquery搜索关键词渲染页面

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/qq_40012791/article/details/99570100

需求：搜索关键词‘屏幕’，以分组形式展示到下方。

解决方案：

前端：
html：
 <div class="form-group field-fireware-fw_forceupdate">
        <label class="control-label" for="fireware-fw_name">依赖关系</label><br>
        <?php if ($model->fw_id > 0) { ?>
            <?php echo '当前：' . empty($info['fw_name'])?'暂无依赖关系<br>':$info['fw_name'] . '【' . $info['fw_version'] . '】' . '<br>'; ?>
        <?php } ?>
        <input type="text" name="rely_keyword" id="rely_keyword" class="form-control" style="width: 700px;display: inline-block">
        <input type="button" id="rely_keyword_btn" value="搜索" class="btn btn-primary">
        <br>
        <table class="fireware-index" width="300px">
        </table>
 </div>

script

var rely_keyword='',reslut;
    $('#rely_keyword_btn').click(function () {
        $(this).attr('disabled', true);
        var rely_keyword = $('#rely_keyword').val();
        var str = '';
        $('.fireware-index').html('');
        $.post("路径", {rely_keyword: rely_keyword},
            function (data1) {
                if (data1.status == 0) {
                    alert('请输入关键词');
                    return false;
                }
                if (data1.status == 1) {
                    var reslut = data1.res;
                    if (reslut.length == 0) {
                        str += '<tr><td><span style="font-size: 14px;">' + '没有搜索到相关内容，请重新搜索。' + '</span></td></tr>';
                        $('.fireware-index').html(str);
                        return  false;
                    }
                    for (var p in reslut) {
                        str += '<tr><td><span style="font-size: 14px" class="form-control">' + p + '</span></td></tr>';
                        for (var k in reslut[p]) {
                            str += '<tr><td><span  style="font-size: 14px" class="form-control"><input type="radio" name="rely_id" value="' + reslut[p][k]['fw_id'] + '">' + '  ' + reslut[p][k]['fw_version'] + '</span></td></tr>'
                        }
                    }
                    $('.fireware-index').html(str);
                }
            }, "json");

        $(this).attr('disabled', false);
    });

后端：

php

/**
     * [Getfwversion]
     * 根据固件名称获取版本信息
     */
    public function actionGetfwversion()
    {
        $rely_keyword = Yii::$app->request->post('rely_keyword');
        if (empty($rely_keyword)) {
            echo json_encode(['status' => 0]);
            die;
        }
        $info = 表名::find()->where(['fw_status' => 1])->andFilterWhere(['like', 'fw_name', trim($rely_keyword)])->orderBy('fw_createtime desc')->select('fw_name,fw_version,fw_id')->asArray()->all();
        $res = array();
        foreach ($info as $k => $v) {
            $res[$v['fw_name']][] = $v;
        }
        echo json_encode(['status' => 1, 'res' => $res], JSON_UNESCAPED_UNICODE);
        die;
    }