之前为了实现这个功能花了我几天的时间。

事实上。实现了之后发现也就那么回事,正所谓万事开头难嘛。。

废话不多说了。这里我使用的是JQuery控件库中的一个Autocomplete控件。即Autocomplete.js,所以首先你要做的就是到JQuery的官网下载这个Autocomplete控件。由于jquery-ui.js中已经包括了Autocomplete.js,所以在html或者.jsp文件里直接引用jquery-ui.js就ok了。下载地址http://jqueryui.com/download/。然后。就是要从后台获取数据和控件的数据源进行绑定。即将获取到的数据赋值给控件的数据属性source(source的数据格式是数组形式。)这样就能实现你想要的功能了。详细的实现代码例如以下。仅供參考,如有不正确的地方请多多不吝赐教。

<pre name="code" class="html"><pre name="code" class="html"><link type="text/css" rel="stylesheet" href=css/jquery-ui.css>
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript" src="../jquery-ui.js"></script>

/*获取后台数据的详细实现。这里採用的是$.ajax*/var userName = "zhangsan"; var nameList = []; function getRoleList() { $.ajax({ url:"findUser.action", type:"Post", dataType:"json", error:function(){alert("error");}, success:function (data) { $.each(data, function
(i, item) { nameList.push(item.userName); }); $("#userName1").autocomplete({ source:nameList }); } }); }; $(function(){ getRoleList(); //获取后台数据 var name = ''; if (name == null || name == "") $("#userName").val(""); else $("#userName").val(name); });</script>




JQuery--使用autocomplete控件进行自己主动输入完毕(相当于模糊查询)的更多相关文章

  1. 【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.10.Button 和 Autocomplete控件

    Button ,可以使用 <button> <input> <a>. <input> 中的不同类型,submit , radio , checkbox ...

  2. 基于jQuery 常用WEB控件收集

    Horizontal accordion: jQuery 基于jQuery开发,非常简单的水平方向折叠控件. Horizontal accordion: jQuery jQuery-Horizonta ...

  3. 一些基于jQuery开发的控件

    基于jQuery开发,非常简单的水平方向折叠控件.主页:http://letmehaveblog.blogspot.com/2007/10/haccordion-simple-horizontal-a ...

  4. jquery 双向select控件bootstrap Dual listbox

    http://www.cnblogs.com/hangwei/p/5040866.html       -->jquery 双向select控件bootstrap Dual listboxhtt ...

  5. 基于Bootstrap的JQuery TreeView树形控件,数据支持json字符串、list集合(MVC5)<二>

    上篇博客给大家介绍了基于Bootstrap的JQuery TreeView树形控件,数据支持json字符串.list集合(MVC5)<一>, 其中的两种方式都显得有些冗余.接着上篇博客继续 ...

  6. 模仿win10样式,基于jquery的时间控件

    工作需要,写了一个基于jquery的时间控件,仿win10系统时间控件格式. 目前基本功能都有了,但时间格式只实现少数,但由于结构设计已经充分优化,填充起来非常容易. 这个控件相对网上其他的时间控件, ...

  7. Jquery 操作Html 控件 CheckBox、Radio、Select 控件 【转】http://www.cnblogs.com/lxblog/archive/2013/01/09/2853056.html

    Jquery 操作Html 控件 CheckBox.Radio.Select 控件   在使用 Javascript 编写前台脚本的时候,经常会操作 Html 控件,比如 checkbox.radio ...

  8. jquery插件——日历控件

    今天在网上有看到一个jquery插件——日历控件,不过之前也在柯乐义的网站上看到了(http://keleyi.com/ 推荐下) 这个插件看着比较大气,所以干脆也分享下,以后自己也好用一点儿 1.页 ...

  9. 弹出框页面中使用jquery.validate验证控件

    弹出框页面中使用jquery.validate验证控件有几个问题需要解决: 1,弹出框的提交事件完成后如何关闭弹出框页面? 2,提交不成功如何返回当前页? 3,如果知道验证事件成功? 之前笔者都是JS ...

随机推荐

  1. Spark学习笔记总结-超级经典总结

    Spark简介 spark 可以很容易和yarn结合,直接调用HDFS.Hbase上面的数据,和hadoop结合.配置很容易. spark发展迅猛,框架比hadoop更加灵活实用.减少了延时处理,提高 ...

  2. electron 的中文文档的地址 以及 窗口改变的步骤

    electron的中文文档的地址: http://www.kancloud.cn/wizardforcel/electron-doc/137791 1.如何创建窗口和改变窗口: import { Br ...

  3. org.hibernate.HibernateException: Could not parse configuration: /hibernate.cfg.xm

    org.hibernate.HibernateException: Could not parse configuration: /hibernate.cfg.xm 检查jar包是否正确以及配置的xm ...

  4. 多行文字在一个div中上下左右居中

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. Django 用ModelForm批量保存form表单(非常实用的方法) mfor_verity项目

    1.先看一下 Model 非常多 from django.db import models from users.models import UserProfile # Create your mod ...

  6. js中引号("")中间设置变量

  7. FreeRTOS 动态内存管理

    以下转载自安富莱电子: http://forum.armfly.com/forum.php 本章节为大家讲解 FreeRTOS 动态内存管理,动态内存管理是 FreeRTOS 非常重要的一项功能,前面 ...

  8. dp之二维背包poj1837(天平问题 推荐)

    题意:给你c(2<=c<=20)个挂钩,g(2<=g<=20)个砝码,求在将所有砝码(砝码重1~~25)挂到天平(天平长  -15~~15)上,并使得天平平衡的方法数..... ...

  9. Pro mvvm读书笔记mvvm中的VM

    一.构建ViewModels 设计模式的其中一个目标就是抽象构造一个给出指定类型的对象或者实现指定类型的接口的过程.需要把类给客户端,让客户端去使用,但是要隐藏类是具体的实现细节. 1.1The Ap ...

  10. Unity3d中使用摄像机制作实时显示小地图

    Unity3d中使用摄像机制作实时显示小地图,以之前的tank为例.开始制作之前场景中物体如图. 开始制作,步骤1:新建一个camera及一个plane.对齐位置,将camera改名为camera_U ...