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

 效果：