监听input输入框变化,并获取结果展示在input输入框下面
.search_content_list {width:374px;display: none;} .search_content_list ul{border:#ddd 1px solid;border-top:none;padding:5px} .search_content_list ul li{height:30px;line-height: 30px;clear:both;} .search_content_list ul li p{float:left;margin:0;padding:0;} .search_content_list ul li a{float:right;text-decoration:underline;}
<div class="formControls" style="width:376px;position: absolute;left:calc(50% - 188px);top:calc(20% - 16px);"> <span class="form-group"> <input class="input-text size-L" type="text" name="keyword" id="keyword" placeholder="请输入单位关键词" style="width: 374px;"> </span> <div class="search_content_list"> <ul id="search_ent_list"></ul> </div> </div>
重点在于下面的propertychange,这个方法是输入一个字就被监听一次
$(document).ready(function(){ $("#keyword").bind('input propertychange', function () { $('.search_content_list').show(); var keyword = $(this).val(); $.ajax({ type: "POST", url: '/company/ajax_search_content.php', data: {keyword:keyword}, success: function(data){ if(data.state == 'success'){ $('#search_ent_list').html(''); var list = data.data; var count = list.length; var html = ''; for(var i=0;i<count;i++){ html += '<li><p>'+list[i].ent_name+'</p><a href="/company/company_info.php?id='+list[i].id+'">查看</a></li>'; } $('#search_ent_list').append(html); } } }); }); });
分类:
jquery
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战