做个有深度的程序员 — YuanGe
自定义组件。搜索框。下拉框显示实时数据。(yGSearch)
自定义组件。搜索框。下拉框显示实时数据。(yGSearch)

自定义组件。搜索框。下拉框显示实时数据。(yGSearch)

  • 效果

默认效果(未输入,未点击)

输入了值

解压后得到三个文件

如果你已经又jq文件了可以把这个删掉
  • 引入
这里的所有路径都是按照你存放文件的路径来引入
css
 <link rel="stylesheet" href="./yGSearch.css">

jq 
<script src="./jquery-3.5.1.min.js"></script>

js
<script type="module">
    import { yGSearch } from './yGSearch.js';
  
</script>
  • html代码部分
<div class="yg-search-style1" id="result" style="">
    <input type="text" autocomplete="off" placeholder="搜索框" class="" id="equipmentAddress">
</div>
  • js代码部分
<script type="module">
    import { yGSearch } from './yGSearch.js';

    yGSearch({
        url: 'http://localhost/demo2/test.php',
        searchKey: 'name',
        id: '#result',
        inputid: '#equipmentAddress',
        item: function (itemData) {
            var item = [' <div class="result-item"  idclose="false">'
                , '<strong style="color:red">' + itemData.wechatName + '</strong><br>'
                , '<span class="item-address">' + itemData.openid + '</span>'
                , '</div>'];
            return item;
        },
        success: function (data) {
            return data;
        },
        click: function (params) {
            console.log(params);
        }
    });
</script>
  • 参数说明
参数说明
url请求地址
searchKey传给后端的搜索字段名
id输入框的父类div Id。下拉结果会沾满这个父类的宽度。可根据自己的需求来设置宽度
inputid输入框的id
item传一个function 待参itemData 。即每一项的数据。需要返回一个数组,内容就是你的选择性的样式。可以加一个class result-item
代表默认样式
success 传一个function 请求成功的回调。需要返回一个json数组。如果你的请求接口不是直接一个数据数组,而是有其他数据。code,msg,
等等。。在这个回调里面做处理。
click 传一个function 点击每一项item回调。返回点击的当前项整行数据。
  • 样式说明

输入框的父类div 可设置的样式目前只有一个 yg-search-style1

每一项点击项可设置的样式目前也是只有一个 result-item

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

-->