第五章 使用 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);

        }

 效果：