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

效果

默认效果（未输入，未点击）

输入了值

下载地址

https://ywhblog.top/download/yGSearch.rar

解压后得到三个文件

引入

这里的所有路径都是按照你存放文件的路径来引入
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

Yuan