zoukankan      html  css  js  c++  java
  • 第五章 使用 Bootstrap Typeahead 组件(百度下拉效果)

    推荐链接:http://www.cnblogs.com/haogj/p/3376874.html

    UnderScore官网:http://underscorejs.org/

    参考文档:http://www.css88.com/doc/underscore/

    页面代码:

    @{
        ViewBag.Title = "Index";
    }
    <script src="Scripts/bootstrap-typeahead.js"></script>
    <script src="Scripts/underscore-min.js"></script>
    <div>
        简单使用
        <div style="margin: 10px 50px">
            <label for="product_search">
                Product Search:
            </label>
            <input id="product_search" type="text" data-provide="typeahead" data-source='["DATA1", "DATA2", "DATA3"]' />
        </div>
        使用脚本填充数据
        <div style="margin: 10px 50px">
            <label for="product_search">
                Product Search:
            </label>
            <input id="product_search_js" type="text" data-provide="typeahead">
        </div>
        <script type="text/javascript">
            $(document).ready(function ($) {
                $.fn.typeahead.Constructor.prototype.blur = function () {
                    var that = this;
                    setTimeout(function () { that.hide() }, 250);
                };
    
                $('#product_search_js').typeahead({
                    source: function (query, process) {
                        return ["JS数据1", "JS数据2", "JS数据3"];
                    },
                    highlighter: function (item) {
                        return "==>" + item + "<==";
                    },
                    updater: function (item) {
                        console.log("'" + item + "' selected."); //浏览器控制台输出
                        $("#product_search").val(item);
                        return item;
                    }
                });
            })
        </script>
        支持 Ajax 获取数据
        <div style="margin: 10px 50px">
            <label for="product_search">
                Product Search:
            </label>
            <input id="product_search_ajax" type="text" data-provide="typeahead">
        </div>
        <script type="text/javascript">
            $('#product_search_ajax').typeahead({
                source: function (query, process) {
                    var parameter = { query: query };
                    $.post('@Url.Action("AjaxService")', parameter, function (data) {
                        process(data);
                    });
                }
            });
        </script>
        使用对象数据
        <div style="margin: 10px 50px">
            <label for="product_search">
                Product Search:
            </label>
            <input id="product_search_object" type="text" data-provide="typeahead">
        </div>
        <script type="text/javascript">
            $(function () {
                
                var products = [
                {
                    id: 0,
                    name: "object1",
                    price: 499.98
                },
                {
                    id: 1,
                    name: "object2",
                    price: 134.99
                },
                {
                    id: 2,
                    name: "object3",
                    price: 49.95
                }
                ];
    
                $('#product_search_object').typeahead({
                    source: function (query, process) {
                        var results = _.map(products, function (product) {
                            return product.name;
                        });
                        process(results);
                    },
    
                    highlighter: function (item) {
                        return "==>" + item + "<==";
                    },
    updater: function (item) { console.log(
    "'" + item + "' selected."); return item; } }); }); </script> </div>

    控制器

    public ActionResult Index()
            {
                return View();
            }
    
            public ActionResult AjaxService()
            {
                string query = "";
                if (!string.IsNullOrWhiteSpace(Request["Query"]))
                    query = Request["Query"].ToString();
                var data = ("AJAX1,AJAX2,AJAX3").Split(',');
                return Json(data);
            }

     效果:

  • 相关阅读:
    Codeforces 787D. Legacy 线段树优化建图+最短路
    Codeforces 1051E. Vasya and Big Integers
    BZOJ3261 最大异或和
    BZOJ3531 SDOI2014 旅行
    洛谷P2468 SDOI 2010 粟粟的书架
    2018 ICPC 焦作网络赛 E.Jiu Yuan Wants to Eat
    HDU6280 From Tree to Graph
    HDU5985 Lucky Coins 概率dp
    (HDU)1334 -- Perfect Cubes (完美立方)
    (HDU)1330 -- Deck (覆盖物)
  • 原文地址:https://www.cnblogs.com/xcsn/p/3456200.html
Copyright © 2011-2022 走看看