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);

    }

  • 相关阅读:
    jvisualm 结合 visualGC 进行jvm监控,并分析垃圾回收
    linux 查看服务器cpu 与内存配置
    arthas 使用总结
    selinux contexts 安全上下文的临时更改
    Android 8.1 Doze模式分析(五) Doze白名单及Debug方式
    Window 任意窗口置顶软件Window TopMost Control
    Android ApkToolPlus一个可视化的跨平台 apk 分析工具
    SVN Please execute the 'Cleanup' command.
    Android 如何在64位安卓系统中使用32位SO库
    Android cmd命令查看apk是32位还是64位?
  • 原文地址:https://www.cnblogs.com/birchlee/p/2183114.html
Copyright © 2011-2022 走看看