Jquery-AutoComplete使用指南
- 格式:docx
- 大小:24.72 KB
- 文档页数:3
jquery联想输入【篇一:jquery联想输入】最近学习了jquery ui的autocomplete 自动补全,和大家分享一下学习的经验,希望对初学者有用。
第一次写博客,使用语言 java js使用语言主要是java,这个参考了网上的一些教程,你可以参考这里jquery ui 实例–自动完成(autocomplete) | 菜鸟教程/jqueryui/example-autocomplete.html先来看一个静态页面的自动补全,数据全部是写死的,没有与后台做交互的。
运行效果如图鼠标选中效果如图:代码如下有些人可能会遇到中文无法联想的问题,这个可能是你的中文乱码了,所以无法联想,这个时候记得把页面文本编码类型改为utf-8就可以了。
接下来我们来看动态的自动补全,自动补全的数据是从后台加载过来的,而不是写死的。
使用语言:java学习这个之前。
你首先要了解ajax技术,至于这个是什么,就请自行百度吧。
动态补全我们需要两部分,前台页面部分和后台服务器处理程序。
在前台页面上输入内容后,输入框的实时的发送到后台,后台进行相应的处理,返回匹配的数据集合到前台显示。
在前面的静态页面中,我们是把需要填充的数据写进了availabletags 数组里,那么如果我们想做与服务器有交互的自动补全,最简单的思路应该是这样,获取前台页面输入框的》发送到后台》后台做相应的处理(例如查询数据库)》返回匹配的数据集合到前台页面》数据集合填充到availabletags数组里,只要你能获得到匹配的数据集合,那其他的操作基本就和静态页面的操作一样了。
我使用的是spring mvc开发。
先看一下后台服务器代码这段代码就是获取前台传入的。
查询数据库,返回含有匹配结果的json字符串到前台,每个人的项目不一样,这段代码参考意义不大。
接下来是前台页面代码使用ajax与后台交互,实时的获取输入框的返回给后台并接收后台返回的匹配结果【篇二:jquery联想输入】加入有jsp页面,其中有input定义如下:input id= inputid name= inputname type= text那么在输入内容的时候如何进行联想?在页面js种这么写:$(function(){ autocompleteinput($( #inputid ));function autocompleteinput(obj) $(obj).autocomplete({ source:function(request, response){},//返回联想词的方法,request为输入内容,response为返回的联想词列表 minlength:2,//最小联想长度,当输入内容长度达到这个长度时才进行联想 select:function(event,ui){}}【篇三:jquery联想输入】1.插件下载及api 地址2.控制层response.getwriter().write(jsonstr);3.json 式为:4.页面ajax请求。
jqueryautocomplete用法详解语法:autocomplete(urlor data, [options] )参数:url or data:数组或者url[options]:可选项,选项解释如下:1) minChars (Number)在触发autoComplete前用户至少需要输入的字符数,Default:1,如果设为0,在输入框内双击或者删除输入框内内容时显示列表。
2) width (Number)指定下拉框的宽度,Default: input元素的宽度3) max (Number)autoComplete下拉显示项目的个数,Default: 104) delay (Number)击键后激活autoComplete的延迟时间(单位毫秒),Default: 远程为400 本地105) autoFill (Boolean)要不要在用户选择时自动将用户当前鼠标所在的值填入到input框,Default: false6) mustMatch (Booolean)如果设置为true,autoComplete只会允许匹配的结果出现在输入框,所有当用户输入的是非法字符时将会得不到下拉框,Default:false7) matchContains (Boolean)决定比较时是否要在字符串内部查看匹配,如ba是否与foo bar 中的ba匹配.使用缓存时比较重要.不要和autofill混用.Default: false8) selectFirst (Boolean)如果设置成true,在用户键入tab或return键时autoComplete 下拉列表的第一个值将被自动选择,尽管它没被手工选中(用键盘或鼠标).当然如果用户选中某个项目,那么就用用户选中的值. Default: true9) cacheLength (Number)缓存的长度.即对从数据库中取到的结果集要缓存多少条记录.设成1为不缓存.Default: 1010) matchSubset (Boolean)autoComplete可不可以使用对服务器查询的缓存,如果缓存对foo的查询结果,那么如果用户输入foo就不需要再进行检索了,直接使用缓存.通常是打开这个选项以减轻服务器的负担以提高性能.只会在缓存长度大于1时有效.Default: true11) matchCase (Boolean)比较是否开启大小写敏感开关.使用缓存时比较重要.如果你理解上一个选项,这个也就不难理解,就好比foot要不要到FOO的缓存中去找.Default: false12) multiple (Boolean)是否允许输入多个值即多次使用autoComplete以输入多个值. Default:false13) multipleSeparator (String)如果是多选时,用来分开各个选择的字符. Default:","14) scroll (Boolean)当结果集大于默认高度时是否使用卷轴显示 Default: true15) scrollHeight (Number)自动完成提示的卷轴高度用像素大小表示 Default: 18016) formatItem (Function)为每个要显示的项目使用高级标签.即对结果中的每一行都会调用这个函数,返回值将用LI元素包含显示在下拉列表中.Autocompleter 会提供三个参数(row, i, max): 返回的结果数组, 当前处理的行数(即第几个项目,是从1开始的自然数), 当前结果数组元素的个数即项目的个数.Default: none, 表示不指定自定义的处理函数,这样下拉列表中的每一行只包含一个值.17) formatResult (Function)和formatItem类似,但可以将将要输入到input文本框内的值进行格式化.同样有三个参数,和formatItem一样.Default: none,表示要么是只有数据,要么是使用formatItem提供的值.18) formatMatch (Function)对每一行数据使用此函数格式化需要查询的数据格式. 返回值是给内部搜索算法使用的. 参数值row19) extraParams (Object)为后台(一般是服务端的脚本)提供更多的参数.和通常的作法一样是使用一个键值对对象.如果传过去的值是{ bar:4 },将会被autocompleter解析成my_autocomplete_backend.php?q=foo&bar=4 (假设当前用户输入了foo). Default: {}20) result (handler) Returns:jQuery此事件会在用户选中某一项后触发,参数为:event: 事件对象. event.type为result.data: 选中的数据行.formatted:formatResult函数返回的值例如:$("#singleBirdRemote").result(function(event, data, formatted){//如选择后给其他控件赋值,触发别的事件等等});2、jquery.autocomplete使用技巧1) jquery.autocomplete需要的数据源可以为:本地数据和远程数据本地数据源为本地js数组或本地的json对象,如:var data = ["c++","java", "php", "coldfusion","javascript"];var data = [{text:'Link A', url:'/page1'}, {text:'Link B', url: '/page2'} ];在使用远程地址时,它默认传入的参数是:q(输入值),limit(返回结果的最大值),可以使用extraParams传入其他的参数,而且远程数据源是需要固定格式的数据,返回结果:使用“\n”分割每行数据,每行数据中使用“|”分割每个元素,如:后台C#代码:string data = "c++\n java \n php \n coldfusion \n javascript";string data = "{text:'LinkA', url:'/page1'} \n {text:'Link B', url: '/page2'} ";3、jquery.autocomplete实例1) 本地数据源的调用方法方法1:$("#tags").autocomplete(["c++","java", "php", "coldfusion","javascript"], {width: 320,max: 4,highlight: false,multiple: true,multipleSeparator: "",scroll: true,scrollHeight: 300});方法2:var data = [{text:'Link A', url:'/page1'}, {text:'Link B', url: '/page2'} ];$("...").autocomplete(data,{formatItem: function(item) {return item.text;}}).result(function(event,item) {location.href = item.url;});2) 远程数据数据源的调用方法方法1:前台js<scripttype="text/javascript">$(document).ready(function() {$("#Login").focus().autocomplete("/ajax/Account", {formatItem: function(row, i,max) {var obj =eval("(" + row + ")"); //转换成js对象return obj.Text;},formatResult: function(row) {var obj =eval("(" + row + ")"); //转换成js对象return obj.Text;}}).result(function(event, item) {var obj = eval("(" +item + ")"); //转换成js对象$("#link").attr(“href”,obj.url);});});</script>后台C#(mvc)代码:public ContentResult GetUserAccount(string q){string strResult = "";//...查询数据操作...//...格式化数据...//格式完成的结果为strResult = "{text:'Link A', url:'/page1'}\n {text:'Link B', url: '/page2'} ";return Content(strResult);}方法2:前台js<scripttype="text/javascript">$(document).ready(function() {$.getJSON("/ajax/Account",function(data) {$("#Login").focus().autocomplete(data, {formatItem: function(item,i, max) {return item.Text;},formatResult:function(item) {return item.Text;}}).result(function(event, item){$("#link").attr(“href”,item.url);});});});</script>后台C#(mvc)代码:publicContentResult Account(string q){string strResult = "";//...查询数据操作...//...格式化数据...//格式完成的结果为strResult = "[{\"text\":\"LinkA\", \"url\":\"/page1\"}, {\"text\":\"LinkB\", \"url\": \"/page2\"} ]";return Content(strResult);}autocomplete在使用ajax传递参数时,默认使用了get方式传递,也实在是没有找到可以通过参数提交post方式的办法。
Autocomplete使用手册效果展示:
在类型名称中输入:管理,下拉框自动出现提示信息。
1,准备文件。
1,需要引入的Js文件:
页面上只需要引入的三个js:
1),ajaxtag/controls.js
2),ajaxtag/ajaxtags-1.2-beta2.js
3),ajaxtag/scriptaculous.js
将这些文件放在引入的js中的最后。
例如:
注意:
因为有$方法冲突,在该页面中不能使用平台提供的验证方法,目前未解决此问题,所以如果要使用到验证方法,必须自己来写验证,留待后人解决。
2,css文件:
1),css/ajaxtags.css
3,Tld文件:
1),WEB-INF/tld/ajaxtags.tld
4,Jar文件:
1):ajaxtags-1.2-beta3.jar
2使用方法:
1,在jsp中写如下代码:
注意这里的:
就是我们在后台需要用到的参数。
需要保存的ID:
需要显示的名称:
2,新建java类AutoCompeleteServlet:
3,最后在web.xml文件里面配置这个servlet:
全部完成。
基于jquery的自动完成插件jquery.autocomplete项目需要一个自动完成功能的text,要求实时从服务端获取符合条件的数据。
想到jquery貌似有类似功能的插件:1.需要下面几个文件:jquery-1.3.2.js,jquery.autocomplete.js,jquery.autocomplete.css。
2.功能要求:随着输入的内容不同不断匹配符合条件的数据项,这就要求动态获取参数。
而jquery传递参数可以用:extraParams: {area:function(){return $('#id').val();}}不过经过使用发现,这样不能动态获取参数,所以修改了一下jquery.autocomplete.js的源码为其添加了一个onBegin属性:(1) 为$.Autocompleter.defaults添加一个属性:onBegin: null,大约在400行;(2)调用方法:$("#id").autocomplete(url,{mustMatch :false,//是否完全匹配width :220,//宽度max :10,//最大显示行数onBegin :function(options){var va = $("#id").val();if(va && va !="")options.extraParams.va = va;return options;},parse :function(data){var par = eval(data);var re = [];if(par !=null&& par !='undfined'){for(var i =0; i < par.length; i++){re[i] ={data : par[i],value : par[i],result : par[i]};//data是数据项,value是值,result是显示项,例如如果数据项为A,那value可以是A.id,result是A.text。
JQueryautocomplete获得焦点触发弹出下拉框需求:autocomplete控件,当点击获得焦点的时候也要弹出下拉列表(autocomplete默认是输⼊之后才会跟随出下拉列表),下⾯直接贴代码。
js代码:$("#customerName").autocomplete({minLength: 0,source: function (request, response) {var customerName = $("#customerName").val();$.ajax({url: "/api/pmstransaction/getcustomerinfo",dataType: "json",data: {customerName: customerName},success: function (data) {response(data.Data);}});},focus: function (event, ui) {$("#customerName").val(ui.item.CustomerName);return false;},select: function (event, ui) {module.viewModel.customerInfo.CustomerName(ui.item.CustomerName);module.viewModel.customerInfo.CustomerTaxCode(ui.item.CustomerTaxCode);module.viewModel.customerInfo.CustomerAddressPhone(ui.item.CustomerAddressPhone);module.viewModel.customerInfo.CustomerBankAccount(ui.item.CustomerBankAccount);return false;}}).focus(function () {$(this).autocomplete("search");}).autocomplete("instance")._renderItem = function (ul, item) {return $("<li>").append("<div>" + item.CustomerName + "</div>").appendTo(ul);} 重点代码focus(function () {$(this).autocomplete("search");})。
前端控件集Wijmo Input模块文档-AutoComplete、MultiSelect一、AutoComplete介绍AutoComplete 控件派生于 ComboBox 并且做了如下的修改:ComboBox•有一个静态的查找列表•有一个固定的查找算法,也就是说,它总是从用户输入的字符串开始查找。
•将项展示为纯文本格式AutoComplete•当用户输入时动态筛选列表。
而且允许你动态提供项。
•查找包含用户输入字符串的项。
•将项展示为HTML格式,允许突出匹配成功项的匹配部分。
这些样例使用了WjAutoComplete组件和AngularJS。
带有字符串数组的AutoComplete下面的AutoComplete控件使用了一个字符串数组作为它的itemsSource。
当你键入时,下拉列表会显示数组中包含你键入文本的项。
注意你可以键入多个搜索条件,比如,'un st'和"United States"匹配。
选择的索引:0选择的项:Afghanistan带有CollectionViews的AutoComplete下面的AutoComplete控件使用一个CollectionView作为它的itemsSource,'country'作为它的displayMemberPath。
与上面的例子主要区别就是,本例中,每一个项就是一个完整的对象,而上一个例子中只是一个字符串。
注意AutoComplete可以在你键入的时候应用一个过滤器到集合视图。
所以如果别的控件也绑定到同一个视图。
它们也会显示过滤后的数据。
要避免这个发生,为AutoComplete创建一个分离的集合视图。
选择的索引:-1选择的项:带有自定义数据源和突出部分的AutoComplete这个AutoComplete控件没有静态的列项目。
相反,它使用itemsSourceFunction属性来指定一个函数调用Ajax并异步返回项。
jQuery Autocomplete简介jQuery UI Autocomplete是jQuery UI的自动完成组件,是我用过的最强大、最灵活的Autocomplete,它支持本地的Array/JSON数组、通过ajax请求的Array/JSON数组、JSONP、以及Function(最灵活)等方式来获取数据。
支持的数据源jQuery UI Autocomplete主要支持字符串Array、JSON两种数据格式。
普通的Array格式没有什么特殊的,如下:1 ["bjpowernode","动力节点","李四"]对于JSON格式的Array,则要求有:label、value属性,如下:1 [{label: "动力节点", value: "bjpowernode"}, {label: "李四", value: "李四"}]其中label属性用于显示在autocomplete弹出菜单,而value属性则是选中后给文本框赋的值。
如果没有指定其中一个属性则用另一个属性替代(即value和label值一样),如下:1 2 [{label: "bjpowernode"}, {label: "李四"}] [{value: "bjpowernode"}, {value: "李四"}]如果label和value都没有指定,则无法用于autocomplete的提示。
另外需要注意,对于从服务器端输出的JSON的key必须用双引号,如下:1 [{"label": "动力节点", "value": "bjpowernode"}, {"label": "李四", "value": "李四"}]否则可能会出现parsererror错误。
jQuery.Autocomplete中文支持插件地址:插件下载地址:jQuery.Autocomplete是jquery的流行插件,能够很好的实现输入框的自动完成(autocomplete)、建议提示(input suggest)功能,支持ajax数据加载。
但唯一遗憾的是,在对中文输入法打开时,firefox3.0中是对中文拼音的自动匹配,而对输入后的中文无法及时触发匹配;而在我的IE6.0下,则无此问题。
原因分析:Autocomplete插件对用户输入字符的触发自动匹配是通过”keydown”事件进行的(可分析jquery.autocomplete.js 第92行),在IE6中,当输入法打开时,输入的字符是不会触发”keydown”的,只有中文输入完毕才触发之,所以中文输入和latin文没有区别的;但在firefox3.0下,无论输入法打开否,按键都会触发”keydown”事件,所以造成中文输入完毕,自动匹配的是刚才打出的部分中文拼音字母。
修改前:Js代码1.$input.bind(($.browser.opera ? "keypress" : "keydown") + ".autocomplete", function(event)修改后:Js代码1.$input.bind(($.browser.opera ? "keypress" : "keyup") + ".autocomplete", function(event)解决方法:网上查到的最多做法是修改jquery.autocomplete.js 第92行,将”keydown”替换为”keyup”,但这个不是根本办法,虽然这样改后可在firefox中及时对输入的中文进行自动匹配,但将原插件中回车、tab等重要的事件机制破坏了,比如这样改后,如果你的input是在一个form里的话,回车从原来的将选定项输入到input中变为了直接提交form表单了,这并不是我们想要的。
JQuery插件autocomplete使⽤说明⽂档项⽬中有时会⽤到ajax⾃动补全查询,就像Google的搜索框中那样,输⼊汉字或者字母的⾸个字母,则包含这个汉字或者字母的相关条⽬会显⽰出来供⽤户选择,该插件就是实现这样的功能的。
autocomplete官⽹:(可下载jQuery autocomplete插件)。
使⽤此插件需要引⽤两个js⽂件和⼀个css⽂件,分别如下:jquery核⼼库⽂件 <script src="./jquery-1.3.2.js"type="text/javascript"></script>当jquery版本过⾼时需要使⽤jquery兼容⽂件<script src="~/Content/jquery-autocomplete/lib/jquery-migrate-1.2.1.js"></script>插件js⽂件 <script src="./jquery.autocomplete.js" type="text/javascript"></script>插件样式⽂件 <link rel="stylesheet" href="./jquery.autocomplete.css" />插件的参数说明如下:minChars(number) 该参数指定在触发autocomplete之前⽤户在查询框中输⼊的最⼩字符数,通常设置为1,即⽂本框值不为空的时候执⾏autocomplete,如果取值为0,则在⽤户双击查询⽂本框或删除⽂本框内容时查询width 该参数的⽤途是指定下拉框的宽度,通常不⽤设置,默认的值为和<input>元素相同max 查询时下拉列表框中显⽰的条⽬数,defaultValue为10delay 击键后激活autoComplete的延迟时间(单位毫秒).Default: 远程为400 本地10autoFill(boolean) 是否在⽤户选择时⾃动将⽤户⿏标所在的值填充到input元素中,default:falsemustMatch(boolean) 参数boolean类型,true时,如果输⼊的查询条件⽆法匹配到合适的结果,则<input>元素中输⼊的查询值会⾃动清空,否则会保留。
{ name: "Donnie Darko", to: "dd@" },指定下拉框的宽度. Default: input元素的宽度* max (Number):autoComplete下拉显示项目的个数.Default: 10* delay (Number):击键后激活autoComplete的延迟时间(单位毫秒).Default: 远程为400 本地10* autoFill (Boolean):要不要在用户选择时自动将用户当前鼠标所在的值填入到input框. Default: false* mustMatch (Booolean):如果设置为true,autoComplete只会允许匹配的结果出现在输入框,所有当用户输入的是非法字符时将会得不到下拉框.Default: false* matchContains (Boolean):决定比较时是否要在字符串内部查看匹配,如ba是否与foo bar中的ba匹配.使用缓存时比较重要.不要和autofill混用.Default: false* selectFirst (Boolean):如果设置成true,在用户键入tab或return键时autoComplete下拉列表的第一个值将被自动选择,尽管它没被手工选中(用键盘或鼠标).当然如果用户选中某个项目,那么就用用户选中的值. Default: true* cacheLength (Number):缓存的长度.即对从数据库中取到的结果集要缓存多少条记录.设成1为不缓存.Default: 10* matchSubset (Boolean):autoComplete可不可以使用对服务器查询的缓存,如果缓存对foo的查询结果,那么如果用户输入foo就不需要再进行检索了,直接使用缓存.通常是打开这个选项以减轻服务器的负担以提高性能.只会在缓存长度大于1时有效.Default: true* matchCase (Boolean):比较是否开启大小写敏感开关.使用缓存时比较重要.如果你理解上一个选项,这个也就不难理解,就好比foot要不要到FOO的缓存中去找.Default: false* multiple (Boolean):是否允许输入多个值即多次使用autoComplete以输入多个值. Default: false* multipleSeparator (String):如果是多选时,用来分开各个选择的字符. Default: ","* scroll (Boolean):当结果集大于默认高度时是否使用卷轴显示Default: true* scrollHeight (Number):自动完成提示的卷轴高度用像素大小表示Default: 180* formatItem (Function):为每个要显示的项目使用高级标签.即对结果中的每一行都会调用这个函数,返回值将用LI元素包含显示在下拉列表中. Autocompleter会提供三个参数(row, i, max): 返回的结果数组, 当前处理的行数(即第几个项目,是从1开始的自然数), 当前结果数组元素的个数即项目的个数. Default: none, 表示不指定自定义的处理函数,这样下拉列表中的每一行只包含一个值.* formatResult (Function):和formatItem类似,但可以将将要输入到input文本框内的值进行格式化.同样有三个参数,和formatItem一样.Default: none,表示要么是只有数据,要么是使用formatItem提供的值.* formatMatch (Function):对每一行数据使用此函数格式化需要查询的数据格式. 返回值是给内部搜索算法使用的. 参数值row* extraParams (Object):为后台(一般是服务端的脚本)提供更多的参数.和通常的作法一样是使用一个键值对对象.如果传过去的值是{ bar:4 },将会被autocompleter解析成my_autocomplete_backend.php?q=foo&bar=4 (假设当前用户输入了foo). Default: {}* result (handler) Returns: jQuery此事件会在用户选中某一项后触发,参数为:event: 事件对象. event.type为result.data: 选中的数据行.formatted:formatResult函数返回的值例如:$("#singleBirdRemote").result(function(event, data, formatted) {//如选择后给其他控件赋值,触发别的事件等等});四、注意问题:1.网上有人说对中文的检索时处理有问题,经过测试此版本没有问题^-^2.在使用远程地址时,它默认传入的参数是:q(输入值),limit(返回结果的最大值),可以使用extraParams传入其他的参数3.autocomplete在使用ajax传递参数时,默认使用了get方式传递,也实在是没有找到可以通过参数提交post方式的办法。
前言jQuery UI是基于jQuery基础类库API开发的开源的JavaScript 网页UI(用户界面)代码组件库,使用jQuery UI可以实现Web UI界面交互、动画、特效和可更换主题的可视控件,并且还可以定制Web UI的主题风格。
从而可以应用它轻松地构建出高度可交互的Web 应用程序的UI界面。
随着Web应用的普及及AJAX相关应用的深入,客户端和Web服务器端需要频繁地交互数据,对Web交互的界面也提出了新的要求——简洁、方便、人性化等用户体验度高;同时随着移动设备的普及,客户端的访问设备也逐渐多样化。
如何为不同的客户端设备提供统一的Web应用界面,从而提高开发效率和降低开发成本。
目前比较好的技术实现手段是应用JQuery及JQuery UI系统库相关的技术。
作者根据自身多年的软件开发实践和经验总结,结合多年的IT职业培训的教学和高校软件学院一线的教学工作体验,在本系列文档中通过具体的程序代码示例为读者介绍jQuery UI中典型的应用组件技术。
本文档为jQuery UI autoComplete自动补全组件的应用提高及应用篇,主要涉及如何应用JQuery中的$.getJSON()函数提交异步请求、如何缓存匹配自动补全数据的应用示例、如何定制autoComplete组件的弹出下拉菜单高度的应用示例、以及如何定义source属性为URL地址字符串的应用示例、如何定制弹出下拉列表的显示格式的应用示例等多个应用示例的内容。
杨教授大学堂精心创作有系列化的优秀程序员职业提升必读技术资料,这些资料将系统地从软件设计和开发实现的“设计思想”、“管理策略”、“技术实现”和“经验方法”等方面与读者进行充分的交流,涉及作者对软件开发设计思想和原则、课程设计、项目实训、软件实现技术等方面的学习心得体会和应用技巧、经验总结。
本文目录1.1Autocomplete组件的应用示例 (3)1.1.1体现autoComplete组件基本特性的应用示例 (3)1.1.2应用AJAX技术获得远程服务器返回的匹配结果示例 (4)1.1.3应用JQuery中的$.getJSON()函数提交异步请求 (14)1.1.4缓存匹配自动补全数据的应用示例 (16)1.1.5定制autoComplete组件的弹出下拉菜单高度的应用示例 (21)1.1.6source为URL地址字符串的应用示例 (28)1.1Autocomplete组件的应用示例1.1.1体现autoComplete组件基本特性的应用示例1、HTML页面及JS代码示例<!doctype html><html><head><meta charset="utf-8"><title>jQuery UI系统库中的AutoComplete自动补全示例</title><script src="../javascript/jquery-1.10.2.js" language="javascript" type="text/javascript"> </script><script src="../javascript/jquery-ui-1.10.3.custom.js"language="javascript" type="text/javascript"> </script><script type="text/javascript">$(function() {var autoCompleteDataSource =[{"label":"Java", "value":"1" },{"label":"JavaScript", "value":"2" },{"label":"C语言", "value":"3" },{"label":"C++", "value":"4" },{"label":"C#", "value":"5" }] ;$("#courseNameTagID").autocomplete({source: autoCompleteDataSource,position:{my: "left top", at: "right bottom"}});});</script><link href="../css/jquery-ui.css" rel="stylesheet" type="text/css" /></head><body>专业课程:<input type="text" id="courseNameTagID" name="courseName" /> </body></html>2、测试效果在课程的文本输入框中输入Java语言的课程名称的第1个字母“J”后,系统将自动匹配相关的以字母“J”开头的各个课程名称,本示例中的测试课程名称只有Java和JavaScript两门课程,而且为本地数据源,没有访问远程Web服务器。
MVC+Jquery+autocomplete(汉字拼音首字母搜索)最近项目中用到了autocomplete了,总结一下经验。
我们先来看一下效果:下面我们来具体说一下使用的过程:1、我们现在准备一下去多大学的数据,可以去我的网盘下载:/share/home?uk=2720046087#category/ty pe=0,其中有两个,一个是AllCollage(刚开始里面没有拼音码,是我自己用了一个js方法添加上去的,最后我告诉大家这个方法)。
另一个是一个sql文件,本文用的是txt文档。
然后我们还需要一个jquery-autocomplete包,可以从网上下载。
2、我们接下来要引入文件了,下面三个三个文件必不可少<script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script><script type="text/javascript" src="/js/jquery.autocomplete.min.js"></script><link rel="Stylesheet" href="/js/jquery.autocomplete.css" /> 因为本人用的框架,所以引入位置就不说了。
3.然后我们就考虑到上面的效果,肯定用异步请求了,首先我们先来读取txt文档(下面只是告诉大家读取的方式)1 $.ajax({2 url: '../../Collage.txt',3 dataType: 'text',4 type: "GET",5 contentType: "application/x-www-form-urlencoded; charset=utf-8",6 success: function (alldata) {alert(alldate);}7 });url,请大家注意路径的问题,还有编码,之前的AllCollage.txt 一定要是utf-8编码,否则会导致读出的数据出现乱码从网上也看了好多资料,下面是网上关于autocomplete的代码$( "#tags" ).autocomplete({source: function( request, response ) {$.ajax({url: "sql/sqlgetWebsqlDataBaseInforAjax",dataType: "json",data:{searchDbInforItem: request.term},success: function( data ) {response( $.map( data, function( item ) {return {dbId:item.dbid,jdbcUrl:item.jdbcUrl,ip:item.ip,port:item.port,sch:item.sch,username: ername,password:item.password,value: belview}}));}});},minLength: 1,其中的source我怎么弄也没弄好,最后自己写的方法,先读出数据在绑定autocomplete$.ajax({url: '../../Collage.txt',dataType: 'text',type: "GET",contentType: "application/x-www-form-urlencoded; charset=utf-8",success: function (alldata) {$('#Collage', form).autocomplete(eval(alldata.split(',')), {minChars: 0,max: 8,autoFill: false,scroll: false,matchContains: true,scrollHeight: 220,width: 148,minLength: 1,formatMatch: function (row, i, max) {return row + " " + row[0].substring(row[0].indexOf('|'));},formatItem: function (data, i, total) {return data[0].trim("'").substring(0, data[0].trim("'").indexOf('|'));//return data[0];}}).result(function (event, data, formatted) {$(this).val($.trim(data).substring(0,data[0].trim("'").indexOf('|')));});}});关于autocomplete的参数可以从网上参考一下,这里就不作详细说明了。
jq命令用法-回复jq命令是一种强大的命令行工具,用于处理和转换JSON格式的数据。
它提供了丰富的功能和选项,使得在处理JSON数据时变得更加简单和高效。
本文将介绍jq命令的用法,并深入探讨其中涉及到的一些主题。
第一步:安装jq命令在开始使用jq命令之前,首先需要安装它。
jq命令可以在Linux和macOS 系统中通过包管理器进行安装,例如使用apt-get命令来安装:sudo apt-get install jq对于macOS系统,可以使用brew包管理器进行安装:brew install jq通过上述命令,我们将jq命令成功安装在系统中。
第二步:使用jq命令的基本语法jq命令的基本语法如下所示:jq [options] filter [file...]其中,options是可选的参数,filter是要应用于JSON数据的过滤器,file 是包含JSON数据的文件。
如果未指定文件,则可以从标准输入读取JSON 数据。
第三步:了解jq的过滤器jq命令的强大之处在于它的过滤器功能。
过滤器用于从JSON数据中选择感兴趣的部分,并对其进行处理。
jq过滤器可以是简单的标识符,也可以是复杂的表达式。
例如,可以使用以下过滤器来选择JSON数据中的所有"name"字段:jq '.name'过滤器可以通过点运算符来访问嵌套的字段。
例如,以下过滤器将选择JSON数据中的"name"字段,它位于一个嵌套的"person"对象中:jq ''除了选择字段之外,jq过滤器还可以进行更复杂的操作,例如过滤和映射数据,计算和聚合值等。
这些操作使用jq内置的函数和操作符。
第四步:使用jq进行JSON数据的过滤和映射使用jq命令进行JSON数据的过滤和映射非常简单。
以以下JSON数据为例:{"name": "Alice","age": 30,"email": "aliceexample"}要选择"name"和"age"字段,可以使用以下过滤器:jq '{name, age}'使用上述过滤器,将只保留"name"和"age"字段,而丢弃其他字段。
jqtooltip用法jq-tooltip是一个基于jQuery的工具库,用于在网页元素上添加鼠标悬停提示信息。
它提供了一种简单易用的方式来创建和自定义提示框,使其能够适应不同的需求。
使用jq-tooltip的基本步骤如下:1. 在HTML页面中引入必要的文件。
在使用jq-tooltip之前,需要引入jQuery库和jq-tooltip插件库。
可以通过以下方式来引入这些文件:```html```2. 创建提示框。
在需要添加提示的元素上添加`data-tooltip`属性,并将其设置为提示内容。
例如:```html<button data-tooltip="这是一个按钮">按钮</button>```3. 初始化jq-tooltip。
在页面加载完成后,通过调用`tooltip(`函数来初始化jq-tooltip。
例如:```javascript$(document).ready(function$('[data-tooltip]').tooltip(;});```4.自定义样式。
可以使用CSS来自定义提示框的样式,以满足特定的需求。
现在我们来详细了解jq-tooltip的用法。
一、初始化选项在初始化jq-tooltip时,可以传递一些选项对象来自定义提示框的行为和样式。
常用的选项包括:- `trigger: 'hover'`:指定提示框的触发方式,可选值包括'hover'(默认)、'click'和'manual'。
- `position: 'top'`:指定提示框的位置,可选值包括'top'(默认)、'bottom'、'left'和'right'。
- `delay: 200`:指定提示框的延迟显示时间(毫秒),默认值为200。
使⽤JQuery⾃动完成插件AutoComplete详解问题当你查找⼀些特殊的东西,当你输⼊准确的词时,找到它可能是困难的(或者很耗时)。
在输⼊的时候展⽰出结果(⾃动完成),使查找变得更简单。
解决⽅案使⽤JQuery⾃动完成插件,更新现有图书列表页⾯上的搜索,当⽤户键⼊的时候⽴即显⽰结果。
讨论这个配⽅也将介绍在view中使⽤ rendering sections。
在shared⽂件夹下layout中⾃动添加了2个javascript⽂件和1个css⽂件。
这些是Ajax和不唐突的Ajax和⽹站主css⽂件。
每次加载的内容越多,页⾯视图加载越慢。
与其在每个页⾯都去包含可能不必要的javascript和css ⽂件,不如在layout中添加⼀个新的RenderSection()。
这允许特别的view在<head>标签去加载特别的javascript或css,但不是每页都添加他们。
下边是⼀个更新后的Views/Shared/_Layout.cshtml,他使⽤了⼀个新的RenderSection()。
<!DOCTYPE html><html><head><title>_Mobile</title><link href="@Url.Content(" rel="external nofollow" rel="external nofollow" ~/Content/Site.css")" rel="stylesheet" type="text/css" /><script src="@Url.Content("~/Scripts/jquery-1.6.2.min.js")" type="text/javascript"></script><script type="text/javascript">$(document).ready(function () {if (window.innerWidth <= 480) {$("link[rel=stylesheet]").attr({ href: "@Url.Content("~/Content/jquery.mobile-1.0b1.min.css")" });}});</script>@RenderSection("JavaScriptAndCSS", required: false)</head><body><div class="page" data-role="page"><div id="header" data-role="header"><div id="title"><h1>My MVC Application</h1></div><div id="logindisplay" class="ui-bar">@Html.Partial("_LogOnPartial")[ @Html.ActionLink("English", "ChangeLanguage", "Home", new { language = "en" }, null) ][ @Html.ActionLink("Français", "ChangeLanguage", "Home", new { language = "fr" }, null) ]</div><div id="menucontainer" class="ui-bar"><ul id="menu"><li>@Html.ActionLink("Home", "Index", "Home", null, new Dictionary<string, object> {{ "data-role", "button" }})</li><li>@Html.ActionLink("About", "About", "Home", null, new Dictionary<string, object> { { "data-role", "button" }})</li></ul></div></div><div id="main" data-role="content">@RenderBody()</div><div id="footer" data-role="footer"></div></div></body></html>主要的CSS⽂件和核⼼的JQuery⽂件被留下来了,因为css在每个也都需要,并且绝⼤多数⽹页也需要JQuery。
前端开发中的表单自动填充技巧随着信息技术的快速发展,用户在互联网上注册账号、填写表单的频率越来越高。
然而,频繁填写表单不仅浪费时间,还容易导致输入错误。
为了解决这个问题,前端开发中的表单自动填充技巧应运而生。
本文将介绍一些实用的技巧,帮助开发人员提高用户体验,提升网站的易用性。
1. 使用浏览器自动填充功能现代浏览器如Chrome、Firefox、Safari等都内置了表单自动填充功能。
当用户填写表单时,浏览器可以根据以往的输入记录自动填充相应的字段。
开发人员只需正确设置表单的name属性,浏览器就会自动识别并填充相应的数据。
然而,有时候浏览器的自动填充功能无法准确预测用户的需求,或者用户不希望表单被自动填充。
在这种情况下,开发人员可以添加"autocomplete"属性来禁用自动填充。
2. 使用插件或框架除了浏览器自带的自动填充功能,还有一些插件或框架可以帮助开发人员实现更灵活的表单自动填充。
例如,jQuery插件中的"autocomplete"插件可以为表单字段添加自动补全功能。
另外,Bootstrap框架提供了很多样式和组件,其中包括自动填充功能。
使用插件或框架可以大大简化开发过程,并且提供更多自定义选项。
开发人员可以根据具体需求选择合适的插件或框架。
3. 通过JavaScript实现自动填充如果没有合适的插件或框架可用,开发人员还可以通过JavaScript来实现表单的自动填充。
使用JavaScript可以灵活地控制填充规则,实现更复杂的填充逻辑。
例如,在一个注册页面中,开发人员可以通过JavaScript获取用户的地理位置信息,并根据该信息自动填充城市和邮政编码字段。
这样,用户无需手动填写这些字段,减少了操作步骤,提高了用户体验。
4. 提供记住密码选项除了自动填充表单字段,有些网站还提供记住密码的选项。
当用户选择记住密码后,下次登录时,密码字段会自动填充。
输入框自动提示使用说明文档状态:草案当前版本:V1.1作者:唐高飞更新时间2008-12-21.概要说明:本方案类似于Google Suggest功能,可以在用户输入查询条件的时候,自动提示用户若干词条,方便用户快速查询。
主要使用两种模式来处理用户输入信息,即Ajax响应模式和本地响应模式。
2.相关说明:关于使用时的相关参数或者方法说明。
var url = "../msg/MsgSetting/search.ajax"; Ajax模式下的地址待论。
parent.$('Pires').src="../msg/MsgSetting/getResult.page?cnd=1"; 地址待论。
2.1Ajax响应模式:当响应用户输入的查询条件时,返回的数据集合量比较大,应用这个模式来返回数据提示集合。
2.2本地响应模式:当响应用户输入的查询条件时,返回的数据集合量比较小,应用这个模式来返回数据提示集合。
2.3autocomplete.js文件:用来生成提示信息的文件,需要用户引入使用。
同时需要prototype.js文件(如果没有引入,请引入)。
2.4data.js文件:本地响应模式下,保存返回给用户提示信息的数据集合,由后台生成。
(文件名字需要讨论定义)2.5MTypeAhead类:2.6用户自定义回调callBack函数:2.7文本框autocomplete属性:请将autocomplete设置为off值,autocomplete属性是将文本框的自动完成设置成关闭,因为这个特性是文本框自带的。
否则会与开发出来的自动提示有冲突。
3.使用说明:引入相关js文件,包括autocomplete.js,prototype.js,data.js(本地模式使用)Ajax响应模式:<input type="text" name="test" id="test" autocomplete="off" /><script language="javascript">new MTypeAhead("test", "", callback, "[]","[]","10");function callBack(value, obj){alert(value);//发送数据到后台处理}</script>本地响应模式:<input type="text" name="test" id="test" autocomplete="off" /><script language="javascript">new MTypeAhead("test", " dataList", callback, "[]","[]","10");function callBack(value, obj){alert();//发送数据到后台处理}或者new MTypeAhead("test", " dataList1,dataList2,dataList3,…", callback, "[‘属性1’,’属性2’,’属性3’…]","[ ‘属性1’,’属性2’…]","10");function callBack(value, obj){alert();//发送数据到后台处理}</script>。
本文由我司收集整编,推荐下载,如有疑问,请与我司联系
jQuery UI Autocomplete 示例(一)
2014/06/05 0
AutoComplete 在获取焦点后,随着用户键入的内容,可以在预订的数据源中查找和已输入的内容相匹配的内容列表供用户选择。
这可以用作之前输入过的内容也可以用作自动填充相关内容,比如根据城市名,自动填充邮编等。
你可以使用本地数据源或是远程数据源,本地数据一般使用小数据集合,比如包含50 条记录的通讯录,远程数据源一般为保护大量记录的数据库。
基本用法本例为使用AutoComplete 的基本用法,通过本地数据源(数组)定义一组语言列表,用户输入字母后,包含该字母的语言会作为列表显示出来:
1 !doctype html
2 html lang=“en”
3 head
4 meta charset=“utf-8” /
5 title jQuery UI Demos /title
6 link rel=“stylesheet”href=“themes/trontastic/jquery-ui.css” /
7 script src=“scripts/jquery-1.9.1.js” /script
8 script src=“scripts/jquery-ui-1.10.1.custom.js” /script
9
10 script
11 $(function () {
12 var availableTags = [
13 “ActionScript”,
14 “AppleScript”,
15 “Asp”,
16 “BASIC”,
17 “C”,。
JQuery插件之autocomplete使用指南
项目中有时会用到ajax自动补全查询,就像Google的搜索框中那样,输入汉字或者字母的首个字母,则包含这个汉字或者字母的相关条目会显示出来供用户选择,该插件就是实现这样的功能的。
使用此插件需要引用两个js文件和一个css文件,分别如下:
jquery核心库文件
<script src="./jquery-1.3.2.js"type="text/javascript"></script>
插件js文件
<script src="./jquery.autocomplete.js" type="text/javascript"></script>
插件样式文件
<link rel="stylesheet" href="./jquery.autocomplete.css" />
插件的参数说明如下:
●minChars(number)
该参数指定在触发autocomplete之前用户在查询框中输入的最小字符数,通常设置为1,即文本框值不为空的时候执行autocomplete,如果取值为0,则在用户双击查询文本框或删除文本框内容时查询
●width
该参数的用途是指定下拉框的宽度,通常不用设置,默认的值为和<input>元素相同
●max
查询时下拉列表框中显示的条目数,defaultValue为10
●delay
击键后激活autoComplete的延迟时间(单位毫秒).Default: 远程为400 本地10
●autoFill(boolean)
是否在用户选择时自动将用户鼠标所在的值填充到input元素中,default:false
●mustMatch(boolean)
参数boolean类型,true时,如果输入的查询条件无法匹配到合适的结果,则<input>元素中输入的查询值会自动清空,否则会保留。
Default:false
●selectFirst(boolean)
参数为true时,则用户按下tab键或者return键时会自动将查询结果的第一条记录选中到input元素中
●cacheLength(number)
缓存记录的条数,即从数据库中取得记录要缓存多少条,1为不缓存,defalut:10
●matchSubset(boolean)
是否对从服务器的查询结果使用缓存,比如:上一次的搜索关键字为java,则下次再次输入java进行查询时不用再次连接服务器查询,而是从缓存中取得上次查询的结果,这样做可以减少访问服务器的次数,提供性能。
Default:true
●matchCase(boolean)
是否开启大小写敏感开关,在使用缓存时比较重要
●multiple(boolean)
是否允许多值查询,如果为true,则查询到第一条结果后,再次输入查询条件则会后续的查询结果显示出来。
●multipleSeparator(string)
只有在multiple属性设置为true时此属性才能生效,该属性用来控制在多条件查询时使用的分隔符,default:”,”
●scroll(boolean)
设置当结果集大于默认高度时是否使用滚动条显示,default:true
●scrollHeight(number)
查询结果框的显示高度,当超过该高度时会使用scroll
●formatItem(Function)
对服务器返回的每一行数据都调用该函数来处理,返回值将用LI元素包含显示在下拉列表中,autocomplete会提供三个参数(row,I,max)其中row表示服务器端返回回来的结果数组,i为当前的行数(正在处理第几行数据),max为返回的记录总数(查询到的结果总数),default:none,不指定则直接返回服务器的结果值
●formatResult(Function)
功能和formatItem基本类似,同样有三个参数作用相同,暂时没发现写该与不写该函数有什么区别
●formatMatch(Function)
暂时不清楚该函数的具体功能,在我做的项目模块中写不写该函数一个样
●result(handler)return jquery
此事件会在用户选中某一项后触发,参数为:event,data,formatted
Event为事件对象
Data为选中的数据行
Formatted:formatResult函数的返回值
例如:
$("#singleBirdRemote").result(function(event, data, formatted) {
如选择后给其他控件赋值,触发别的事件等等
●extraParams (Object):
为服务器端后台提供更多的参数,参数的形式如下:{name:lixiao},在向后台传递参数时会自动在url后追加该参数?name=lixiao
●使用注意事项:
1:在使用远程地址时,它默认传入的参数是:q(输入值),limit(返回结果的最大值),可以使用extraParams传入其他的参数。