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

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

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) {//预读本地文件示例，不支持ie8obj.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 查询

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

html5 输入框关键字搜索,vue input输入框关键字筛选检索列表数据展示
想必大家在项目开发中难免会用到关键字筛选的功能,正好这次项目有需求要做这一块,就整理一下vue的input输入框输入关键字检索数据列表的代码.下面直接上代码: html: {{item.name}} ...
用正则实现input输入框关键字搜索到的内容关键字高亮
背景:在input框中输入关键字后,后台会返回模糊搜索数据(模糊搜索前端也可以实现,后面单独写前端模糊搜索的实现),这里根据输入框搜索的关键词去匹配后台返回的结果,并将结果中的关键字高亮显示,具体效果 ...
jquery代码实现可输入多关键字搜索下拉框
参考网站:https://www.edoou.com/articles/1552378028436732 https://blog.csdn.net/xuxiaoyinliu/article/deta ...
1688 API分享：1688商品采集接口 1688关键字搜索接口
随着"无界零售"时代的到来,越来越多的企业开始寻求数字化转型,其中最重要的一个环节就是数据的互通和整合.而阿里巴巴旗下的B2B网站1688也推出了API接口,为企业间的数据交流提供 ...
vue版本--腾讯地图demo，可搜索关键字和经纬度，显示地图和搜索结果列表
腾讯地图demo,改正确的key即可用 <!DOCTYPE html> <html><head><meta charset="UTF-8" ...
python中一共有多少个关键字-python – 搜索多个关键字的字符串列表
我有两个python列表,一个是关键字列表,另一个是文件名列表.我需要根据我拥有的关键字解析文件名列表.我希望python将文件名与关键字匹配,然后根据匹配的关键字执行操作. 我看起来像这样: key ...
小程序-输入关键字搜索，关键字在搜索列表中高亮效果
这里写自定义目录标题小程序-输入关键字搜索,关键字在搜索列表中高亮效果小程序-输入关键字搜索,关键字在搜索列表中高亮效果第一步:按照网上大神写的思路,在截取首位关键字空格方法出现找不到repl ...
UE4中蓝图实现输入框输入关键字搜索对应东西
一.目的 1.想知道:UE4中蓝图实现输入框输入关键字搜索对应东西二.参考 1.UE4 高级游戏功能系统教程-搜索查询系统-P3 搜索功能开发(完结篇) https://www.bilibili.c ...
python批量搜索关键字_python – 搜索多个关键字的字符串列表
我有两个 python列表,一个是关键字列表,另一个是文件名列表.我需要根据我拥有的关键字解析文件名列表.我希望python将文件名与关键字匹配,然后根据匹配的关键字执行操作. 我看起来像这样: ke ...

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

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

最新文章

热门文章