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

Posted 2022-02-01 酸辣柠檬粉

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

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

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

代码借鉴处找不到了

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


@section('content')
<style>
    bodymargin: 0;font-size: 14px;font-family: "微软雅黑";color: #333;
    lilist-style:none;
    .layui-input-block ulposition: 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 licursor: 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 查询