jQuery实现用户输入自动完成功能

利用jQuery UI中Auto-complete插件实现输入自动完成功能，大家在使用诸如淘宝、京东等电商平台搜索商品时，往往只要输入商品的一些特殊字符，就可以显示出和该字符相近的列表菜单，用户使用鼠标或者键盘方向键就可以快速选择，实现了很好的用户体验。

1.最简单的用户输入自动完成

<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>jQuery UI Autocomplete - Default functionality</title>
 <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="external nofollow" >
 <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
 <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
 <script>
 $(function() {
 //定义并初始化字典库数据源集合
 var availableTags = [
 "ActionScript",
 "AppleScript",
 "Asp",
 "BASIC",
 "C",
 "C++",
 "Clojure",
 "COBOL",
 "ColdFusion",
 "Erlang",
 "Fortran",
 "Groovy",
 "Haskell",
 "Java",
 "JavaScript",
 "Lisp",
 "Perl",
 "PHP",
 "Python",
 "Ruby",
 "Scala",
 "Scheme"
 ];
 //自动完成插件函数
 $( "#tags" ).autocomplete({
 //自动完成字典库数据源
 source: availableTags
 });
 });
 </script>
</head>
<body>
<div class="ui-widget">
 <label for="tags">请输入: </label>
 <input id="tags">
</div>
</body>
</html>

2 使用远程数据源自动完成

Auto-complete插件不光可以实现本地数据源的自动完成，也可以读取远程的数据源，列如实现从服务器端读取数据源信息。

通过将服务器数据缓存到浏览器中，获取的数据源首先保存在cache变量中。

 $(function() {
 //自定义缓存变量
 var cache = {};
 //自动完成插件函数
 $("#tags").autocomplete({
 //定义用户最少输入的字符数
 minLenght: 2,
 source: function(request, response){//定义远程获取数据源函数
 var term = request.term;//定义用户请求信息变量
 if(term in cache) {//判断请求数据是否存在缓存中
 response(cache[term]);//真，从缓存中读取数据
 return;
 }
 $.getJSON('data.json', request, function(data, Status, xhr) {
 cache[term] = data.result;//缓存远程数据
 response(data.result);
 });
 }
 });
 });

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！

赞 (0)

相关推荐

  • 基于jquery实现的类似百度搜索的输入框自动完成功能

    基于jquery实现的类似百度搜索的输入框自动完成功能

    废话不多说,直观的看一下: 实现这个功能需要服务端配合.客户端通过脚本来展示从服务端取得的数据. 先看客户端的HTML: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  <html xmlns="http://www.w3.org/1999/x

  • PHP结合jQuery.autocomplete插件实现输入自动完成提示的功能

    PHP结合jQuery.autocomplete插件实现输入自动完成提示的功能

    我们在很多项目中使用了搜索功能来帮助用户更快更准确的找到想要的信息.本文将介绍如何实现用户输入自动提示的功能,就像谷歌百度搜索引擎一样,当用户输入关键字时,输入框下方会有提示,将与关键字相关的信息展现出来供用户选择,提升了用户体验. 本文将使用jquery ui的autocomplete插件,结合后端PHP,数据源通过PHP读取mysql数据表的数据. XHTML 首先将jquery库和相关ui插件,以及css导入. 复制代码 代码如下: <link rel="stylesheet&quo

  • jQuery实现用户输入自动完成功能

    利用jQuery UI中Auto-complete插件实现输入自动完成功能,大家在使用诸如淘宝.京东等电商平台搜索商品时,往往只要输入商品的一些特殊字符,就可以显示出和该字符相近的列表菜单,用户使用鼠标或者键盘方向键就可以快速选择,实现了很好的用户体验. 1.最简单的用户输入自动完成 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <t

  • 基于jQuery实现搜索关键字自动匹配功能

    基于jQuery实现搜索关键字自动匹配功能

    今天我们就一起来看一个简单的基于jquery的关键字自动匹配的例子,希望文章能够对各位有帮助. 例子一 在项目中,有时候需要用户选择城市,但是城市太多,用户选择起来不太方便,所以提供了一个用户可以通过输入框输入城市的汉字或者拼音简写.结果示意图如下: 当输入拼音后结果示意图如下: 实现代码如下: <html><head><title>实时查询城市通过姓名或拼音简写</title></head><meta charset = "ut

  • jQuery的Ajax的自动完成功能控件简要说明

    jQuery的Ajax的自动完成功能控件简要说明

    jQuery的Ajax的自动完成功能允许您轻松地创建自动完成/自动提示框的文本输入字段.它始建集中表现为每一个查询缓存被从本地缓存中相同的重复的查询结果.如果没有特定查询的结果,它停止发送请求到服务器的其他查询. Ajax的自动完成的jQuery的是麻省理工学院风格的许可证的条款下自由分发.这是目前支持的浏览器:IE 7 +,FF 2 +,Safari 3以上,谷歌9 +. 要求:jQuery框架下载链接:http://www.devbridge.com/projects/autocomplet

  • Android用户输入自动提示控件AutoCompleteTextView使用方法

    Android用户输入自动提示控件AutoCompleteTextView使用方法

    一.简介 1.AutoCompleteTextView的作用 2.AutoCompleteTextView的类结构图 也就是拥有EditText的各种功能 3.AutoCompleteTextView工作原理 AutoCompleteTextView的自动提示功能肯定需要适配器提供数据 4.Android里的适配器 5.适合AutoCompleteTextView的适配器 ArrayAdapter 二.AutoCompleteTextView实现自动提示的方法 1)AutoCompleteTex

  • jsp实现用户自动登录功能

    理解并掌握Cookie的作用以及利用cookie实现用户的自动登录功能,实现下图效果 当服务器判断出该用户是首次登录的时候,会自动跳转到登录界面等待用户登录,并填入相关信息.通过设置Cookie的有效期限来保存用户的信息,关闭浏览器后,验证是否能够自动登录,若能登录,则打印欢迎信息:否则跳转到登录页面. login.jsp <%@ page language="java" import="java.util.*" pageEncoding="utf-

  • Android EditText 监听用户输入完成的实例

    我们都知道, Android EditText输入框,并没有监听用户输入完成的功能,需要我们自己实现. 下面是实现的方法,仅供参考: EditText editText = (EditText) findViewById(R.id.edit); editText.addTextChangedListener(new TextWatcher() { @Override public void beforeTextChanged(CharSequence charSequence, int i, i

  • 详解jQuery UI库中文本输入自动补全功能的用法

    自动补全(autocomplete),是一个可以减少用户输入完整信息的UI 工具.一般在 输入邮箱.搜索关键字等,然后提取出相应完整字符串供用户选择. 一．调用autocomplete()方法 $('#email').autocomplete({ source : ['aaa@163.com', 'bbb@163.com', 'ccc@163.com'], }); 二．修改autocomplete()样式    由于autocomplete()方法是弹窗,然后鼠标悬停的样式.通过Firebug

  • 使用Jquery搭建最佳用户体验的登录页面之记住密码自动登录功能（含后台代码）

    需要引入插件jquery.md5.js 可直接在IIS下运行: 用户名:Ethan.zhu 密 码:123456789 完整文件下载:WebApplication1_jb51.rar 首先将按钮单击事件的异步验证提取出来作为一个单独的函数,需要将按钮单击事件里面的变量提取出来定义为全局变量,并且增加一个变量editPass(用来标记是自己输入密码,还是从cookies中读取的密码) 复制代码 代码如下: var wrongTypeName, //用户名的错误类型,可以直接作为错误提示信息数组的下

  • Jquery插件仿百度搜索关键字自动匹配功能

    Jquery插件仿百度搜索关键字自动匹配功能

    本文实例为大家分享了Jquery搜索关键字自动匹配功能的实现代码,供大家参考,具体内容如下 jQuery AutoComplete 是一个基于jQuery实现搜索关键字自动匹配提示的插件,该插件可扩展性强,表现性能优越,方便整合到自己的项目中使用:兼容IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+, and Chrome 1.0+ 等主流浏览器. 下面是具体的使用方法: 1.使用设置 首页,要把插件的js代码嵌入到你自己的项目中去. 复制代码 代码如下: <scr

随机推荐