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

使用JQuery和clip属性实现模糊查询的下拉框

最新推荐文章于 2024-02-25 13:09:58 发布

原创

最新推荐文章于 2024-02-25 13:09:58 发布 · 333 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JQuery #JavaScript #JS #input #select

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

一个前端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);

最低0.47元/天解锁文章