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

标签: jquery 文本 自动完成 | 发表时间:2013-01-28 15:02 | 作者:梦想天空(山边小溪)
出处:http://www.cnblogs.com/lhb25/

  文框输入框的自动完成和自动提示功能可以帮助用户快速的完成操作,是非常好的产品使用体验。这里向大家推荐一款优秀的 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 文本输入框自动完成 & 自动提示插件

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

hide

本文链接

相关 [jquery 文本 自动完成] 推荐:

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

- - 博客园_梦想天空
  文框输入框的自动完成和自动提示功能可以帮助用户快速的完成操作,是非常好的产品使用体验. 这里向大家推荐一款优秀的 jQuery 文本输入框自动完成 & 自动提示插件,帮助你在网站中轻松添加输入框的自动完成和自动提示功能. 您可能感兴趣的相关文章. 12款很棒的浏览器兼容性测试工具推荐. 10套精美的免费网站后台管理系统模板.

文本框输入内容进行动态提示(jquery部分)

- - CSDN博客Web前端推荐文章
姓名
. //文本框输入内容进行动态提示. if(val.length>0){ //当文本内容不为空时进行异步检索. if(status=="success"){ //当接收服务器端数据成功时. var tipText=$.parseJSON(data); //进行解析json数据.

JQuery 选择器

- - CSDN博客Web前端推荐文章
}

点击我

.    像上面这样把JavaSript代码和HTML代码混杂在一起的做法同样也非常不妥,因为它并没有将网页内容和行为分离,所以才有JQuery选择器的学习.

点击我

. //给class为demo的元素添加行为.

jquery操作xml

- - CSDN博客Web前端推荐文章
jquery真的很强大,虽然一直在用jquery,不用一直都没有深入,这几天重新学习了一下,不得不感叹她的强大,已经让我深深入迷. 这里记录一下,她是怎么快速地操作xml的.. 这里我们有一个xml文件:. jquery如何操作呢,总的思想,就是和操作dom差不多的方法. 首先我们获取这个文件的内容:(我先引入jquery库哈).

jQuery JSONP跨域

- - Web前端 - ITeye博客
基于Jquery的Ajax跨域访问. 单点登录服务器(sso服务器). 登录网页项目的时候,由于使用了单点登录,所以页面会跳转到sso服务器,进行统一登录,. 现在需要在该界面增加令牌的认证,但是SSO服务器和令牌服务器部署在不同的服务器,且暂时没有要合并的可能,所以在SSO登录的时候必须要对令牌进行验证,就必须涉及到了跨域访问的问题.

jquery 插件

- - JavaScript - Web前端 - ITeye博客
 jQuery插件的开发包括两种:. 一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法. jQuery的全局函数就是属于jQuery命名空间的函数,另一种是对象级别的插件开发,即给jQuery对象添加方法. 下面就两种函数的开发做详细的说明. 1 、类级别的插件开发.

让jquery更快

- - JavaScript - Web前端 - ITeye博客
很久没有关注jQuery了,最近重新看了一下,看到一些不错的文章,转来坐一下笔记. 其内容和一些新提供的方法还是很多有值得学习的地方. 使用最新版本的jQuery. jQuery的版本更新很快,你应该总是使用最新的版本. 因为新版本会改进性能,还有很多新功能. 下面就来看看,不同版本的jQuery性能差异有多大.

jQuery Tools:Web开发必备的 jQuery UI 库

- - 博客园_首页
jQuery Tools 是基于. jQuery 开发的网站界面库,包含网站最常用的Tabs(选项卡)、Tooltip(信息提示)、Overlay(遮罩、弹窗)、Scrollable(滚动控制)、Form Validator(表单验证)、Rangeinput(范围选择)、Dateinput(日期选择)等众多功能.

jQuery基础之jQuery的DOM操作

- - CSDN博客推荐文章
 为了能全面地讲解DOM操作,首先需要构建一个网页. 因为每一张网页都能用DOM表示出来,而每一份DOM都可以看作一棵DOM树.    

你最喜欢的水果是?

 .      
  • 苹果
  •  .      
  • 橘子
  •  .

    jQuery最佳实践

    - andi - 阮一峰的网络日志
    上周,我整理了《jQuery设计思想》. 那篇文章是一篇入门教程,从设计思想的角度,讲解"怎么使用jQuery". 今天的文章则是更进一步,讲解"如何用好jQuery". 我主要参考了Addy Osmani的PPT《提高jQuery性能的诀窍》(jQuery Proven Performance Tips And Tricks).