一个前端JQuery写一个通过clip属性来写的input+select的支持模糊查询的下拉框

最新推荐文章于 2021-01-12 07:07:50 发布

大白熊_BlankBear

最新推荐文章于 2021-01-12 07:07:50 发布

阅读量278

点赞数

分类专栏：前端文章标签： JQuery JavaScript JS input select

本文链接：https://blog.csdn.net/qq_34823218/article/details/102902982

版权

这篇博客介绍了如何利用前端JQuery和clip属性创建一个支持模糊查询的input+select下拉框。为了减轻服务器压力，文中提到使用setTimeOut函数延迟执行AJAX请求。文章提供了部分关键代码，并引用了多个参考资料作为参考。

摘要由CSDN通过智能技术生成

一个前端JQuery写一个通过clip属性来写的input+select的支持模糊查询的下拉框

Ps1：需要在数据库写一个支持模糊查询的存储过程，或者对应的逻辑

Ps2：这里为了减少服务器的压力，通过setTimeOut函数将ajax操作延后执行

由于是项目代码的一部分，只能尽量把代码展示出来，有疑问可以私聊我

html

<div class="info-item" style=" position:relative;"><span><font color="#FF0000">*</font>客户归属部门:</span>
            <select class="my_select_select" style ="width: 200px;" id="gsbm">
            </select>
            <input class="my_select_text"  style ="width: 180px;" id="gsbmInput"/>
</div>

CSS

<style>
.info-item{ width:50%;  float:left;font-size:14px;line-height:30px;}
.info-item a{ color:#CC1414;}
.info-item span{ width:31%; display:inline-block; text-align:right;   }
 .my_select_select {
            position: absolute;
            left: 31.5%;
            top: 3px;
            *top: 3px;
            width: 100px;
            clip: rect(0 auto auto 80px);
            height: 22px;
            line-height: 30px;
            font-size: 14px;
            /*padding-left:10px;*/
        }

        .my_select_text {
            position: absolute;
            left: 31.5%;
            t