JQuery--使用autocomplete控件进行自己主动输入完毕（相当于模糊查询）

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

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

废话不多说了。这里我使用的是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>

转载于:https://www.cnblogs.com/lxjshuju/p/6761604.html

JQuery--使用autocomplete控件进行自己主动输入完毕（相当于模糊查询）相关推荐

jqueryui autocomplete 控件自定义source检索
有时侯我们在做自动完成时为了从多字段去检索,往往会发起个ajax请求让服务端去实现.对于这种数据集固定不变的数据源这种做法显然给服务器增加了不少请求. 实际上jqueryui autocomplete ...
基于MVC4+EasyUI的Web开发框架经验总结（13）--DataGrid控件实现自己主动适应宽带高度...
在默认情况下,EasyUI的DataGrid好像都没有具备自己主动宽度的适应功能,通常是指定像素宽度的.可是使用的人员计算机的屏幕分辨率可能不一样,因此导致有些地方显示太大或者太小,总是不能达到好的预 ...
弹出框页面中使用jquery.validate验证控件
弹出框页面中使用jquery.validate验证控件有几个问题需要解决: 1,弹出框的提交事件完成后如何关闭弹出框页面? 2,提交不成功如何返回当前页? 3,如果知道验证事件成功? 之前笔者都是JS ...
Asp.net Ajax AutoComplete 控件的用法
AutoComplete控件是微软提供的ASP.NET AJAX Control Toolkit 中的一个控件,是用来实现类似百度搜索的自动完成效果. AutoComplete控件的用法很简单,只要在 ...
JQuery Highcharts图表控件使用说明
JQuery Highcharts图表控件使用说明 Highcharts 官网:http://www.highcharts.com Highcharts 官网示例:http://www.highcha ...
让jQuery Tools Scrollable控件在Mobile Web里面支持resize功能
让jQuery Tools Scrollable控件在Mobile Web里面支持resize功能项目中有两份代码,一份是Main Site,一份是Mobile Site.Main Site里面主页 ...
jquery日期时间控件
代码下载地址: jquery日期时间控件下载地址 . 工作中用到, 这里分享一下, 避免重复摸索劳动. 一. HTML 文件 <!DOCTYPE HTML PUBLIC "- ...
一起谈.NET技术，asp.net Ajax ---AutoComplete控件使用
简介: AutoComplete控件就是在用户在文本框输入前几个字母或是汉字的时候,该控件就能从存放数据的文或是数据库里将所有以这些字母开头的数据提示给用户,供用户选择,提供方便. 重要属 ...
jquery+bootstrap分页控件
jquery+bootstrap分页控件源码: (function ($) {$.fn.extend({ftx_pager: function (paraObj) {var total = para ...

JQuery--使用autocomplete控件进行自己主动输入完毕（相当于模糊查询）

JQuery--使用autocomplete控件进行自己主动输入完毕（相当于模糊查询）相关推荐

最新文章

热门文章