【ASP.Net MVC】在AspNet Mvc使用JQuery AutoComplete组件
2014-07-19 09:35
387 查看
在AspNet Mvc使用JQuery AutoComplete组件
官方文档:
http://api.jqueryui.com/autocomplete/#entry-examples
要使用JQuery AutoComplete组件,需要引用:
【1】.jquery.js
【2】.jquery-ui.js
【3】.jquery.ui.autocomplete.css
然后这样使用即可:
var submitAutoCompleted = function(event, ui) { var $input = $(this); $input.val(ui.item.label); ....... }; var createAutoCompleted = function() { var $input = $(this); var ajaxOption = { source: $input.attr("data-oft-ajax-autocompleted"), //告诉AutoComplete组件去哪里获取数据 select:submitAutoCompleted //选择某选项后,要处理的逻辑 }; $input.autocomplete(ajaxOption); } $("input[data-oft-ajax-autocompleted]").each(createAutoCompleted);
1.1 目标
为文本框的实现自动输入提示功能。比如:
在文本框中输入“K”,自动提示你可能要输入的所有以“K”开头的选项。
1.2 实现步骤
第一步:在控制器中创建AutoCompleted的Aciton
返回类型JsonResult。为JQuery AutoComplete组件提供Json格式的数据
/// <summary> /// /// </summary> /// <param name="term"></param> /// <returns> //http://localhost:3951/Reviews/autocompleted?term=老 //返回JSON,如下格式: // [ // {"label":"老字号餐馆1000"},{"label":"老字号餐馆1001"},{"label":"老字号餐馆1002"}, // {"label":"老字号餐馆1003"},{"label":"老字号餐馆1004"},{"label":"老字号餐馆1005"}, // {"label":"老字号餐馆1006"},{"label":"老字号餐馆1007"},{"label":"老字号餐馆1008"},{"label":"老字号餐馆1009"} // ] /// </returns> public ActionResult AutoCompleted(string term) { var model = _restaurantReviews.Where(r=>r.Name.ToLower().Contains(term.ToLower().Trim())) .Take(10) .Select(r=> new { label = r.Name //匿名对象的字段名必须是label,因为ui.item.label }); //serialize model into JSON format return Json(model,JsonRequestBehavior.AllowGet); }
值得注意的是:
匿名对象的字段名必须是label,因为在后面的js方法中用到的:
var submitAutoCompleted = function(event, ui) { var $input = $(this); $input.val(ui.item.label); var $form = $input.parents("form:first"); $form.submit(); };
ui.item.label名字是固定的,参看本文的第四步。
第二步:为文本框填添加属性data-otf-autocompleted,用于锚点
<input type="search" name="searchKey" data-oft-ajax-autocompleted="@Url.Action("AutoCompleted")" />
@Url.Action("AutoCompleted")是指向第一步定义的Action:
public ActionResult AutoCompleted(string term)
第三步:添加javascript代码处理
$(function () { var createAutoCompleted = function() { var $input = $(this); var ajaxOption = { source: $input.attr("data-oft-ajax-autocompleted") //告诉AutoComplete组件去哪里获取数据 }; $input.autocomplete(ajaxOption); } $("input[data-oft-ajax-autocompleted]").each(createAutoCompleted); });
到这一步,就实现了实现了自动提示输入功能。
注意,当没有看到效果,尝试检查是否存在如下原因: 如果上面的js代码是在原来已经存在的js文件(比如:abc.js)中添加,浏览器已经如果加载过该js文件,就有可能不会再加载js文件, 导致该js文件中不存在我们第三步添加的js代码。处理办法是:刷新页面(按F5键)。
第四步:添加当选择提示下的某一项时,需要处理的逻辑:
在ajaxOptin中添加select参数:
在这里要演示的是,当选中文本框的某项后,导致其父html的Form提交表单,html代码如下:
<form method="post" action="@Url.Action("Index")" data-otf-ajax="true" data-otf-ajax-updatetarget="#restaurantList"> <input type="search" name="searchKey" data-oft-ajax-autocompleted="@Url.Action("AutoCompleted")" /> </form>
然后,在js文件中添加javascrtpt代码,使得
当选中文本框的某项后,导致其父html的Form提交表单
$(function () { var submitAutoCompleted = function(event, ui) { var $input = $(this); $input.val(ui.item.label); var $form = $input.parents("form:first"); $form.submit(); }; var createAutoCompleted = function() { var $input = $(this); var ajaxOption = { source: $input.attr("data-oft-ajax-autocompleted"), //告诉AutoComplete组件去哪里获取数据 select:submitAutoCompleted //选择某选项后,要处理的逻辑 }; $input.autocomplete(ajaxOption); } $("input[data-oft-ajax-autocompleted]").each(createAutoCompleted); });
用FireFox浏览器的Firebug插件,可以监视到:ui.item.label名字是固定的。显然,当item.value没显式设置值时,自动被赋值为item.labe
![](http://images.cnitblog.com/i/380433/201407/191220273184578.jpg)
item--官网给的解释:
item
Type: Object
label
Type: String
The string to display for the item.
value
Type: String
The value to insert into the input when the item is selected.
其他资料:
http://www.cnblogs.com/yongheng178/archive/2011/11/15/2249632.html
【The end】
相关文章推荐
- 【ASP.Net MVC】在AspNet Mvc使用JQuery AutoComplete组件
- ASP.NET MVC使用jQuery实现Autocomplete
- 大叔手记(20):ASP.NET MVC中使用jQuery时的浏览器缓存问题
- JQuery插件中的treeview与asp.net mvc的结合使用实例(转)-附加自己的写法
- Jeditable - jQuery就地编辑插件在ASP.NET MVC 中的使用
- Jquery Autocomplete 结合asp.net使用要点
- 基于jquery的文本框与autocomplete结合使用(asp.net+json)
- 跟ASP.NET MVC一起使用jQuery
- ASP.net MVC使用Jquery-pager和Newtonsoft.Json进行分页
- 使用jQuery.Ajax向ASP.NET MVC控制器Post数据
- 跟ASP.NET MVC一起使用jQuery
- Asp.net MVC使用JQuery Validate实现用户名重名查询
- Asp.net Mvc 的积木,谈Asp.net MVC中视图逻辑模块化和controller组件的使用方法
- asp.net下使用jQuery.AutoComplete完成仿淘宝商品搜索自动完成功能(改进了键盘上下选择体验)
- 使用jQuery.Ajax向ASP.NET MVC控制器Post数据
- 如何使用jQuery向asp.net Mvc传递复杂json数据-Filter篇
- 跟ASP.NET MVC一起使用jQuery
- asp.net MVC下 使用jquery进行异步提交的两种方式
- 使用jQuery向asp.net Mvc传递复杂json数据-ModelBinder篇
- ASP.NET MVC中使用jQuery EasyUI TreeGrid教程