zoukankan      html  css  js  c++  java
  • 老生常谈:Asp.net MVC 3+ Jquery UI Autocomplete实现百度效果

    常见的示例很多,本文只是我的工作记录。

    前台页面:

    @{
        ViewBag.Title = "首页";
    }
    @section Header
    {
        <script type="text/javascript">
            $(document).ready(function () {
                $("#keyword").autocomplete({
                    source:function (request, response) {
                        $.ajax({
                            url: "@Url.Action("Search", "Home")",  //要查询的Action
                            type: "POST",  //Post提交
                            dataType: "json", //json格式数据,默认是text
                            data: { keyword:request.term}, //参数,不知道为什么?请指点

                          //data: {keyword:$("#keyword").val()},同样可以
                            success: function (data) {
                                response($.map(data, function (item) {
                                    return { label: item.text, value: item.value}; //将返回的jsonresult的属性赋值给autocomplete item
                                }));
                            }
                        });
                    },
                    focus: function(event, ui) {
                     $('#keyword').val(ui.item.label); //选中item的文本

                     return false;
                    },
                    select: function(event, ui) {
                         $('#keyword').val(ui.item.label);  //选中item的文本

                         $('#txtSelectValue').val(ui.item.value); //选中item的值
                         return false;
                   }
                });
            });
        </script>
    }
    关键字:
    @Html.TextBox("keyword", "")

    @Html.Hidden("txtSelectValue") //智能查询选中的值

    Action代码:

    // GET:  /Home/Index

    // POST: /Home/Search

    public ActionResult Index()

    {

         return View();

    }

    [HttpPost]

    public ActionResult Search(string keyword)

    {

        //根据关键字查询,返回json格式对象集合

         第一种方式:循环

         List<object> items=new List<objects>();

         var item=new {text="",value=""}

         items.Add(item);

        第二种方法:直接用linq to Entity添加

         var dataList= organService.AddDataList();//获取数据列表

         items.AddRange(dataList.Select(o => new
         {
             text= o.NAME,
             value= o.CODE.ToString()
          }));

        //---------------------------------------

         return Json(items, JsonRequestBehavior.AllowGet);

    }

  • 相关阅读:
    用jquery判断当前显示器的分辨率,加载不同CSS
    [置顶] Android SDK下载和更新失败的解决方法!!!
    [置顶] 最全的Android开发开发资料
    [置顶] Android入门教程导入现有Android工程
    [置顶] 用Android访问本地站点(localhost,10.0.2.2)
    [置顶] Android入门教程Android工程目录结构介绍
    [置顶] 解决Android解析图片的OOM问题
    [置顶] Android入门教程环境搭建
    [置顶] Android 中的拿来主义(编译,反编译,AXMLPrinter2,smali,baksmali)
    Windows 8 平板电脑体验及思考
  • 原文地址:https://www.cnblogs.com/birchlee/p/2183114.html
Copyright © 2011-2022 走看看