jQuery搜索框自适用文本长度

最新推荐文章于 2022-11-16 14:36:25 发布
最新推荐文章于 2022-11-16 14:36:25 发布
阅读量94 收藏
点赞数
分类专栏： 网站模版 文章标签： jquery
原文链接：https://yy123.ink/frontDetail/7638
版权

下载地址

使用jQuery实现的input输入自动变宽的插件，这个是搜索框，自适用输入文本的宽度。

1630520943.png

dd:

amohan
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery 插件仿百度搜索框智能提示(带Value值)
10-27
这个插件适用于那些希望在搜索框中提供动态建议，并且需要将用户选择的建议值关联到特定数据的情况。以下是插件的关键知识点： 1. **jQuery插件开发**： - jQuery插件是通过扩展jQuery对象的原型链来创建的，使得...
html 移动端 搜索,jquery移动端搜索框
weixin_35661850的博客
06-04 417
.weui-search-bar {position:relative;padding:8px;display:flex;box-sizing:border-box;background-color:red;-webkit-text-size-adjust:100%;align-items:center;}.weui-search-bar.weui-search-bar_focusing .weu...
使用 jQuery Mobile 与 HTML5 开发 Web App —— 07 jQuery Mobile 列表
Ryan Z 的技术日志
08-08 1013
如 Kayo 之前所写的文章 《使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 内容格式》中所述，这次介绍的是 jQuery Mobile 列表组件。 jQuery Mobile 列表虽然也是对页面内容进行丰富，但 jQuery Mobile 列表会给标准的 HTML 赋予一套样式以及丰富的交互处理，因此它是一套完整的组件，并且 jQu
jquery mobile input 和select 改变宽度
zhonghaima的博客
09-02 1590
jquery mobile  input 和select 改变宽度 .ui-field-contain  .ui-input-text{       width : 300px !important;   } .ui-field-contain  .ui-select{       width : 300px !important;   }
jQuery学习：搜索框功能 进行其他选项的显示
weixin_47295886的博客
11-16 607
获取焦点+键盘抬起的时候输入框会显示 当输入框失去焦点的时候隐藏。
jqueryui autoComplete 组合下拉框过长问题的解决
u010319440的专栏
04-03 1970
在做项目的时候需要用到jquery-ui 的 autoComplete 插件中的 组合框combobox 按照官方网站给的代码敲，如果select 的 option 过多的话 会出现下拉后框过长，那如何将这个下拉框弄小呢 找到引用的jquery-ui.css 搜索 .ui-autocomplete 这个css类的定义 修改为 .ui-autocomplete { positi
jQuery仿腾讯首页搜索框样式特效代码
03-20
《jQuery仿腾讯首页搜索框样式特效代码解析》 在网页设计中，用户界面的美观性和易用性至关重要，其中搜索框作为用户获取信息的重要入口，其设计与功能实现更是不容忽视。本文将深入探讨如何使用jQuery技术来实现一...
自伸缩的搜索框
06-01
自伸缩搜索框能够根据用户的输入长度动态调整宽度，从而保持页面的整体布局不被打乱，同时提供足够的输入空间。 标签中提到了“js特效”和“jQuery特效”，这表明实现自伸缩搜索框可能涉及JavaScript和jQuery这两种...
基于Jquery和Css3代码制作可以缩放的搜索框
12-03
本文将讲解如何使用jQuery和CSS3技术创建一个可伸缩的搜索框，以适应不同的界面需求。首先，我们从HTML结构开始。 HTML结构是构建搜索框的基础。在页面上，你需要一个`<div>`元素，id为"search_bar"，作为搜索框...
jQuery 和 CSS 的文本特效插件集锦
10-25
8. **JQuery Text Highlighter and Filter Plugin**：用于突出显示文本，可以用于搜索结果或者关键词强调。 9. **JQuery Marquee Plugin**：实现水平滚动文本效果，类似于传统的电视新闻滚动条。 10. **Scrolling ...
jquery实现搜索框功能实例详解
10-18
主要介绍了jquery实现搜索框功能,搜索框实现搜索一个ul列表中的指定关键词的li。具体实现代码大家参考下本
jQuery实现带搜索功能的下拉框
05-02
jQuery searchableSelect实现带搜索功能的下拉框
使用Jquery实现带有搜索框的下拉框
10-23
使用Jquery实现带有搜索框的下拉框，里面有已经实现的实例。其中的异步加载数据需要自己手动填写或者做一些临时数据也可以。
jquery 自动补全搜索框控件
06-13
jquery 自动补全搜索框控件 jquery 自动补全搜索框控件 jquery 自动补全搜索框控件
jquery的搜索框输入提示
10-11
基于jquery的搜索框输入提示 关键词匹配搜索 仿百度与google的搜索框输入提示，支持键盘上下选择与鼠标点击选择。只包含前面代码，后台返回数据为模拟的数据。
JQuery实现搜索框功能
热门推荐
十一的博客
06-20 1万+
在用html代码用placeholder="text"就能实现text:表示在文本框要显示的内容html代码：&lt;body&gt;     &lt;form action="" method="post"&gt;     &lt;input  type="text" placeholder="请输入"  id="key" /&gt;  
Jquery 搜索框
u011265702的博客
06-19 395
function SearchKeyUp(id) { $("#" + id).textbox('textbox').bind('change', function () { $("#divKey").hide(); }); $("#" + id).textbox('textbox').bind('keyup', function () { var obj = $("#divKey");...
jquery实现搜索框功能
TAO_GIS的博客
07-23 8602
搜索框实现搜索一个ul列表中的指定关键词的li。 html代码： &lt;ul class="todo-content"&gt; &lt;li class="todo-ltem"&gt; &lt;div class="todo-tip"&gt; &lt;p&gt;f
又一个jQuery 搜索框提示，很好用
05-12
内容索引:脚本资源,jQuery,搜索提示,自动完成　　又一个jQuery 搜索框提示，很好用，至于功能不用多介绍了吧，百度、Google搜索首页都在用，类似Windows的自动完成功能，可以提示下拉框输入的内容。 　　注意：本例子只介绍使用方法，因此提示的内容只有几条，实际应用时这个需要你从数据库中读出，相信高手都知道的。
jquery百度搜索框上下键显示文本内容
最新发布
04-03
以下是一个基本的实现示例，您可以根据自己的需求进行修改和扩展： HTML代码： ``` <input type="text" id="search" autocomplete="off"> <ul id="suggest"></ul> ``` CSS代码： ``` #suggest { position: absolute; top: 30px; left: 0; width: 300px; max-height: 200px; overflow-y: auto; background-color: #fff; border: 1px solid #ccc; padding: 0; margin: 0; } #suggest li { list-style: none; padding: 5px; cursor: pointer; } #suggest li:hover { background-color: #f5f5f5; } ``` jQuery代码： ``` $(function() { var $input = $('#search'); var $suggest = $('#suggest'); var selectedIndex = -1; $input.on('keyup', function(e) { var keyword = $.trim($input.val()); if (keyword === '') { $suggest.hide(); return; } if (e.keyCode === 38 || e.keyCode === 40) { // Up or Down arrow key var $listItems = $suggest.find('li'); if (e.keyCode === 38 && selectedIndex > 0) { selectedIndex--; } else if (e.keyCode === 40 && selectedIndex < $listItems.length - 1) { selectedIndex++; } $listItems.removeClass('selected'); $listItems.eq(selectedIndex).addClass('selected'); return; } $.ajax({ type: 'GET', url: 'suggest.php', data: { keyword: keyword }, dataType: 'json', success: function(data) { var html = ''; if (data.length > 0) { $.each(data, function(i, item) { html += '<li>' + item + '</li>'; }); } else { html = '<li>No suggestions found</li>'; } $suggest.html(html).show(); selectedIndex = -1; } }); }); $suggest.on('mousedown', 'li', function() { var text = $(this).text(); $input.val(text); $suggest.hide(); }); $(document).on('mousedown', function(e) { var $target = $(e.target); if (!$target.is($input) && !$target.is($suggest)) { $suggest.hide(); } }); }); ``` 说明： 1. 用户在搜索框输入关键词时，会触发 `keyup` 事件。 2. 如果关键词为空，或者用户按下了 Esc 键，就隐藏建议框。 3. 如果用户按下了 Up 或 Down 键，就在建议框中选中上一个或下一个选项，并修改搜索框中的文本。 4. 如果用户输入了有效的关键词，就通过 AJAX 请求获取相关的建议列表，并在建议框中显示出来。 5. 当用户点击建议框中的某个选项时，就将该选项的文本复制到搜索框中，并隐藏建议框。 6. 当用户在页面上点击其他地方时，就隐藏建议框。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值