优秀的 jQuery 文本输入框自动完成 & 自动提示插件-阿里云开发者社区

开发者社区> 秋天风景> 正文

优秀的 jQuery 文本输入框自动完成 & 自动提示插件

简介:   文框输入框的自动完成和自动提示功能可以帮助用户快速的完成操作,是非常好的产品使用体验。这里向大家推荐一款优秀的 jQuery 文本输入框自动完成 & 自动提示插件,帮助你在网站中轻松添加输入框的自动完成和自动提示功能。
+关注继续查看

  文框输入框的自动完成和自动提示功能可以帮助用户快速的完成操作,是非常好的产品使用体验。这里向大家推荐一款优秀的 jQuery 文本输入框自动完成 & 自动提示插件,帮助你在网站中轻松添加输入框的自动完成和自动提示功能。

您可能感兴趣的相关文章

 

  在这篇文章中,我们使用 jQuery 实现智能输入框光标的位置。它不需要图像,是使用纯粹的 CSS3 实现的,而且实时、准确,这意味着你在添加或删除文本的时候它会自动适应。使用事件代理机制实现,所以不用担心性能问题。

下载源码    在线演示

  

  主要参数介绍:

  • serviceUrl:Ajax 请求的 URL;
  • lookup:本地数据数组;
  • minChars:触发自动提示的最小字符数;
  • params:请求的附加参数;
  • formatResult:返回结果的格式化函数;
  • autoSelectFirst:是否自动选中第一个;
  • onSearchStart:搜索开始的回调函数;
  • onSearchComplete:搜索完成的回调函数;
  • tabDisabled:是否禁用 Tab 键;

 

使用方法

  这个差距的使用非常简单,下面是 HTML、CSS 和 JavaScript 示例代码。

  HTML 代码:

<input type="text" name="country" id="autocomplete"/>

  CSS 代码:

.autocomplete-suggestions { border: 1px solid #999; background: #FFF; overflow: auto; }
.autocomplete-suggestion { padding: 2px 5px; white-space: nowrap; overflow: hidden; }
.autocomplete-selected { background: #F0F0F0; }
.autocomplete-suggestions strong { font-weight: normal; color: #3399FF; }

  Ajax 查找模式:

$('#autocomplete').autocomplete({
    serviceUrl: '/autocomplete/countries',
    onSelect: function (suggestion) {
        alert('You selected: ' + suggestion.value + ', ' + suggestion.data);
    }
});

  本地查找模式:

var countries = [
   { value: 'Andorra', data: 'AD' },
   // ...
   { value: 'Zimbabwe', data: 'ZZ' }
];

$('#autocomplete').autocomplete({
    lookup: countries,
    onSelect: function (suggestion) {
        alert('You selected: ' + suggestion.value + ', ' + suggestion.data);
    }
});

您可能感兴趣的相关文章

   

本文链接:优秀 jQuery 文本输入框自动完成 & 自动提示插件

编译来源:梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

作者:山边小溪
主站:yyyweb.com 记住啦:)
欢迎任何形式的转载,但请务必注明出处。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
jquery插件制作 -- 5.提示框插件
  今天我们介绍的是提示框插件tooltip的制作,其中还会介绍到自定义选择器插件的开发。   我们首先来介绍自定义选择器的开发,他的代码结构如下: (function ($) { $.expr[':'].customselector = function (object,index,properties,list) { //code }; })(jQuery); 调用时候的写法: $(a:customselector)   现在我们先解释下函数中所使用到的各个参数。
717 0
python写一段脚本代码自动完成输入(目录下的所有)文件的数据替换(修改数据和替换数据都是输入的)【转】
转自:http://blog.csdn.net/lixiaojie1012/article/details/23628129     初次尝试python语言,感觉用着真舒服,简单明了,库函数一调用就OK了 [python] view plain copy 在CODE上查看代码片派生到我的代码片 import sys,os,os.
558 0
jquery插件制作 -- 4.自增长输入框
  本章我们将创建一个自增长的输入框插件,jquery.aotogrow.js。首先还是看html代码: DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.
740 0
【Jquery】插件—Watermark实现自定义文本框水印
1 2 3 4 jQuery 5 Watermark 6 7 8 google.load("jquery", "1.3.2"); 9 10 11 12 13 .
755 0
文本框中只能输入数字
1 同上上篇日志  老师给的代码 Private Sub TextBox1_KeyPress(ByVal sender As Object, ByVal e As System.Windows.
720 0
基于jquery的自动补全
写个简单的自动补全,供学习的朋友参考,希望对大家所有帮助 需要先引入jquery,注意自己的引入路径 &lt;script type="text/javascript" src="js/jquery.min.js"&gt;&lt;/script&gt; &lt;input id="chooseCity" type="text" placeholder="输入城市
1236 0
+关注
秋天风景
既然选择了远方,便只顾风雨兼程。
2394
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载