输入框关键字搜索候选列表

Posted 2021-07-09 酸辣柠檬粉

类似于百度搜索框 ，在搜索框下有数据库匹配的数据列表。

Layui输入框关键字查询候选栏列表

用的Laravel模板，layui的css和js未展现在这，需要自行引入

代码借鉴处找不到了

@extends('layouts.app')
@section('header')
@parent
@endsection


@section('content')
<style>
    body{margin: 0;font-size: 14px;font-family: "微软雅黑";color: #333;}
    li{list-style:none;}
    .layui-input-block ul{position: absolute;top: 29px;left: 0px;width: 100%;border: 1px solid #b6b6b6;padding: 0;margin: 0;box-sizing: border-box;
    -moz-box-shadow: 0px 10px 10px #e0e0e0;-webkit-box-shadow:0px 10px 10px #e0e0e0;box-shadow: 0px 10px 10px #e0e0e0;background: #fff;display: none;z-index:999999;}
    .layui-input-block ul li{cursor: pointer;padding: 0 3px;line-height: 28px;font-size: 14px;color: #7a77c8;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;border: 0px solid rgb(211,211,217);}
</style>
<div class="layui-container container-padding">
    <form class="layui-form" action="">

        <div class="layui-form-item">
            <label class="layui-form-label">用户账号</label>
            <div class="layui-input-block">
                <input type="text" class="layui-input" required lay-verify="required" name="username" id="username" autocomplete='off' @if(!empty($data['username'])) value="{{$data['username']}}" @endif>
                <ul>
     
                </ul>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">用户类型</label>
            <div class="layui-input-block">
                <select name="type" id="">
                    @foreach($type as $k=>$t)
                    <option value={{$t}} @if(isset($data['type']) && $data['type']==$t) selected @endif)>{{$t}}</option>
                    @endforeach
                </select>
            </div>
        </div>
       
    </form>

</div>
@endsection

@section('script')
@parent
<script>

layui.use(['form', 'table', 'upload', 'jquery'], function() {
    var form = layui.form,
        table = layui.table,
        $ = layui.jquery,
        upload = layui.upload;

    var uploadInst = upload.render({
        elem: '#test1',
        url: '{{url("imagesUpload")}}' //改成您自己的上传接口
            ,
        before: function(obj) {
            //预读本地文件示例，不支持ie8
            obj.preview(function(index, file, result) {
                $('#demo1').attr('src', result); //图片链接（base64）
            });
        },
        done: function(res) {
            //如果上传失败
            if (res.code == 200) {
                $('#url').val(res.url);
            } else {
                return layer.msg(res.msg);
            }
            //上传成功
        },
        error: function() {
            //演示失败状态，并实现重传
            var demoText = $('#demoText');
            demoText.html(
                '<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>'
            );
            demoText.find('.demo-reload').on('click', function() {
                uploadInst.upload();
            });
        }
    });

    form.on('submit(submit)', function(data) {
        var url = "{{url('callback/store')}}"
        $.post(url, data.field, function(res) {
            if (res.code == 200) {
                layer.msg('提交成功', {
                    icon: 1,
                    time: 2000
                }, function() {
                    parent.layui.table.reload('List');
                    parent.layer.closeAll(); //关闭弹窗
                });
            } else {
                layer.msg(res.msg);
            }
        })

        return false;
    })

    //当输入框输入值 时 值发生改变时也会触发该事件
    $(document).on("input", "#username", function() {
        var value = $(this).val();
        value = $.trim(value) //空格验证
        if (value) { //当输入框有值时 ，获取数据出现提示框
            var url = '/buyer/nickname?key='+value;
            var str = '';
            $.get(url,function(res){
                if(res.code==200){
                    var data = res.data;
                    for(var i=0;i<data.length;i++){
                        str += '<li>'+data[i]['nickname'] +"</li>";
                    }
                    $(".layui-input-block ul").empty();
                    $(".layui-input-block ul").append(str);
                    $(".layui-input-block ul").slideDown();
                }
            })
        } else {
            $(".layui-input-block ul").fadeOut(80);
        }
    });

    //点击提示框的值 把值直接赋到输入框
    $(document).on("click", ".layui-input-block ul li", function() {
        $("#username").val($(this).text());
        $(".layui-input-block ul").fadeOut(80);
    });

    //输入框失去焦点时 隐藏提示框
    $(document).on("blur", "#username", function() {
        $(".layui-input-block ul").fadeOut(200);
    });

    //输入框得到焦点时 //如果已经有值 直接显示数据
    // $(document).on("focus", "#username", function() {
    //     var value = $(this).val();
    //     value = $.trim(value) //空格验证
    //     if (value) { 当输入框有值时 ，获取数据出现提示框
    //         var data = getUsername(value);
    //         $(".layui-input-block ul").empty();
    //         $(".layui-input-block ul").append(data);
    //         $(".layui-input-block ul").slideDown();
    //     } else {
    //         $(".layui-input-block ul").fadeOut(80);
    //     }
    // });


})
</script>
@endsection

 

php 接口就只有一个 like 查询